CSS 垂直图像对齐方式的变化

Question

我正在创建一个画廊。 我有一行缩略图，其中每一行都是它自己的div，一行有五个缩略图。 问题是，这些缩略图的高度既不统一，也不可预测。 我为缩略图提供了10.25rem宽度，以保持其宽度可预测性，同时保持其比例高度。 不幸的是，这导致水平对齐的图像上方有不同程度的空白，结果有点丑陋。 我当前的代码，只是为了让我们在这一点上都在同一页面上：

相关 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;
}

相关 HTML/树枝：

<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>

我想做的是将所有图像垂直对齐到每个gallery-row的中间。 由于行的高度取决于最高的缩略图，因此它们会填充行，较短的缩略图将位于中间而不是底部。 唯一的问题是我不知道该怎么做。 我已经尝试了此处列出的各种建议，但它们没有奏效。 我得到的只是我的图像堆叠在一起，完全超出了正常的文档流程。

Answer 1

您可以display: inline图像并添加vertical-align: middle，如下所示：

http://jsfiddle.net/s9gp49kq/

Answer 2

这是你要找的吗？

如果是这样，是我所做的吗？

» 取下.gallery-thumb上的width

» 在下面添加了此代码以解决问题：

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

这样，无论高度是否，您的.gallery-row和.gallery-thumb垂直对齐。

请参阅下面的完整片段：

#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>