The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical-Align on Responsive Site

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #160691

    I’m using Foundation 5’s framework for my responsive site and I’m having a problem trying to vertically align my images within their div, especially when the user resizes their browser window. I’ve got two types of images; square images and portrait images.

    I’m vertically aligning my image covers like so:

    .cover {
        height: 312px;
        display: table-cell;
        vertical-align: bottom;
        background-color: #F0D5C0;

    I’ve posted an example of the issue I’m having here:

    Basically, when you adjust the browser size, the square image elements lose their vertical-align altogether . I always want all images to stay aligned with to the bottom so the text block lines up, no matter what the size of the image.

    I realise this is likely because of the height I’ve set on my .cover element above. Is there a way for me to automatically set a height that plays well with a responsive layout when resized?

    Any help is appreciated. Thanks in advance!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.