Question

我正在创建一个画廊。我有一排缩略图，每行都是自己的div，一行有五个缩略图。问题是，这些缩略图的高度既不均匀也不可预测。我给缩略图宽度为10.25rem，以便在保持其比例高度的同时保持宽度可预测。不幸的是，这导致水平对齐的图像在它们上方具有不同程度的空白，结果有点难看。我目前的代码，就在这时我们都在同一页面上：

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

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

Answer 1

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

http://jsfiddle.net/s9gp49kq/

Answer 2

这是你在找什么？

如果是的话，我做了什么？

»删除width

上的.gallery-thumb

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

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

CSS垂直图像的变化对齐

2 个答案: