the alpha newswire

Centering image links using CSS

Posted by Alpha Sun, 30 Dec 2007 21:05:58 GMT

It took me no small amount of time to figure out how to horizontally and vertically center image links, so here it is for posterity’s sake. Note that this doesn’t work in IE and is rather specific to my purposes in creating thumbnail links for a bunch of pictures.

<div class="thumbnail">
    <a href=/some/link>
        <img src=/some/image>
    </a>
</div>

.thumbnail {
    height:150px;
    width:150px;
    line-height:150px;
    text-align:center;
}

.thumbnail img {
    vertical-align:middle;
}