html - 在缩略图和网格中使用 Bootstrap 的垂直居中图像

Question

我想要在网格类和缩略图类中使用 Bootstrap 的垂直居中图像。缩略图类应该具有相同的高度。并且该段落应位于图像下方的同一级别。 已经尝试了所有可能的方法，但在 Internet 搜索中我没有找到合适的解决方案。示例只有带网格的图像或带缩略图的图像，但没有结合网格和缩略图。 有人能解决我的问题吗？

<div class="row">
          <div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_100px.jpg" ></div>
            </div>
            <p>Some Text</p>
          </div><!--

          --><div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_60px" ></div>
            </div>
            <p>Some Text</p>
          </div><!--

          --><div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_120px.jpg" ></div>
            </div>
            <p>Some Text</p>            
          </div><!--

          --><div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_80px.jpg" ></div>
            </div>
            <p>Some Text</p>
          </div>
        </div>

那行不通!

.thumbnail{
    display: inline-block;
    vertical-align: middle;
}

Answer 1

包含.thumbnail的父元素必须有 display:table;对于 vertical-align: middle;上类。最佳做法是使用 <table>布局和分配 vertical-align到您想要垂直居中对齐的元素，例如:

table, tbody, thead, th, tr, td, td table {
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
td, th {
  display: table-cell;
  vertical-align: inherit;
}

td元素(或 .thumbnail 在你的情况下)应该是 display: table-cell;在display:table;里面元素。

请注意 line-height使用 vertical-align: middle; 时，分配给父元素的值也会产生影响在它的 child 身上。

我不建议使用 top: 50%; transform: translateY(-50%);正如其他人在上面所建议的那样，这根本不是最佳实践。