SommitRealWeird

Centering a Logo in a Fixed Size Div

To get a logo centered in a fixed size div, where you're not entirely sure of the dimensions of the image, but it has a fixed size space to fit in, you'd expect to just be able to set the image to margin: auto; and have display: block; on the image... this, apparently, doesn't work... so, here we go...

First, create the containing div, in my case I give this a class of centeredlogo, then put the image in the middle of it, so you end up with something like:

    <div class="centeredlogo">
        <img src="mylogo.png" alt="My Funkeh Logo" />
    </div>

The CSS should look something like:

    div.centeredlogo {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    div.centeredlogo img {
        vertical-align: middle;
    }

And so, it should display something like:

The borders there are purely to show where the image and it's containing div are.