Variation on CSS vertical image align

Question

I'm in the midst of creating a gallery. I have rows of thumbnail images where each row is its own div, and there are five thumbnails to a row. The problem is, the heights of these thumbnails are neither uniform nor predictable. I have given the thumbnails a width of 10.25rem in order to keep their widths predictable while maintaining their proportional heights. Unfortunately, this has resulted in the horizontally-aligned images to have varying degrees of whitespace above them, and the result is kind of ugly. My current code, just so we're all on the same page at this point:

Relevant CSS:

#gallery {
    margin-top: 0.85em;
}

.gallery-row {
    margin-top: 0.25em;
}

.gallery-thumb {
    margin: 0 0.25em;
    width: 10.250rem;
    border: 1px solid #c70f36;
    border-radius: 4px;
}

Relevant HTML/Twig:

<div id="gallery">
    <div class="gallery-row">
    {% for image in images %}
        {% if loop.index0 % 5 == 0 %}
            </div><div class="gallery-row">
        {% endif %}
        <a href="{{ asset('uploads/gallery/' ~ image.filename) }}" data-lightbox="gallery"><img src="{{ asset('uploads/gallery/' ~ image.filename) }}" class="gallery-thumb"></a>
    {% endfor %}
    </div>
</div>

What I'd like to do is vertically align all the images to the middle of each gallery-row. Since the row's height is dependent on the tallest thumbnail, they'd fill the row and the shorter thumbnails would be in the middle rather than the bottom. Only problem is that I'm not sure how to do it. I've tried the various suggestions listed here, but they haven't worked. All I get are my images stacked on top of one another, completely outside of the normal document flow.

score 2 · Accepted Answer · answered Nov 14 '14 at 22:19

2

You can make your images display: inline and add vertical-align: middle, like this:

http://jsfiddle.net/s9gp49kq/

answered Nov 14 '14 at 22:19

alpipego

3,223
2
17
28

1

inline-block is probably more correct, since the images have margins and borders – hair raisin Nov 14 '14 at 22:22
Wonder why OP mostly the time choose the fastest solution, but not always the best solution. – dippas Nov 14 '14 at 22:53

dippas · Answer 2 · 2014-11-14T22:34:58.530

Is this what you are looking for?

If so, is what I did?

» Remove your width on .gallery-thumb

» Added this code below to do the trick:

  #gallery {
     display:table
 }
 .gallery-row:before {
     content:"";
     display: inline-block;
     height: 100%;
     vertical-align: middle;
 }
 .gallery-row {
     display:table-cell;
     vertical-align:middle
 }

This way you have either your .gallery-row and .gallery-thumb vertical aligned whether the height is.

See Full Snippet Below:

#gallery {
    margin: 1em;
    border:1px solid blue;
    display:table
}
.gallery-row {
    display:table-cell;
    vertical-align:middle
}

.gallery-row:before {
    content:"";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.gallery-thumb {
    margin: 0 0.25em;
    padding:.5em;
    border: 1px solid #c70f36;
    border-radius: 4px;
    
}

<div id="gallery">
  <div class="gallery-row">
    <a href="#" data-lightbox="gallery">
      <img src="http://placehold.it/100x100" class="gallery-thumb" />
    </a>
  </div>
  <div class="gallery-row">
    <a href="#" data-lightbox="gallery">
      <img src="http://placehold.it/100x110" class="gallery-thumb" />
    </a>
  </div>
  <div class="gallery-row">
    <a href="#" data-lightbox="gallery">
      <img src="http://placehold.it/100x120" class="gallery-thumb" />
    </a>
  </div>
  <div class="gallery-row">
    <a href="#" data-lightbox="gallery">
      <img src="http://placehold.it/100x130" class="gallery-thumb" />
    </a>
  </div>
  <div class="gallery-row">
    <a href="#" data-lightbox="gallery">
      <img src="http://placehold.it/100x140" class="gallery-thumb" />
    </a>
  </div>
</div>

Variation on CSS vertical image align

2 Answers2