Skip to main content

Vertically align images using CSS

By Sue Johnson

Vertically aligned logos

Have you had the problem of vertically aligning images on a web page, for example a series of logos?

I researched this problem and found a number of complex solutions using positioning. There is a simpler way and it is responsive as well.

HTML markup

This is an example of HTML markup for a row of images. The first two logos have a link which could be an external link, the third has no link.

<div class="row">
    <div>
        <a href="#">
            <img src="img/c-with-circles.png" alt="c logo">
        </a>
    </div>
    <div>
        <a href="#">
            <img src="img/community-grants.png" alt="community grants logo">
        </a>
    </div>
    <div>
        <span>
            <img src="img/g-with-grey-background.png" alt="g logo">
        </span>
    </div>
</div><!--.row-->

The CSS

You need to create some CSS to make the div elements within the row float to the left:

.row div {
    float: left;
    margin: 0 10px;

}

This causes the images to line up from the left hand side, on a mobile phone the images may form more than one line.

You then need to create the CSS which will vertically align the images.

You set the display of the element around the images to table-cell and give it a height, which should be the height of the tallest image.

You vertically align the images by setting vertical-align to middle.

The CSS shown here allows for images both with and without links, you might only need one or the other.

.row a, .row span {
    display: table-cell;
    vertical-align: middle;
    height: 110px; /*height of tallest image*/
    padding: 0;
    margin: 0;
}

That is it, you now have a series of vertically aligned images.

What will you create using this technique?

All comments will be held in a moderation queue. A selection will be published.

One comment on “Vertically align images using CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.