在缩略图和网格中具有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分配给要垂直居中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;内部display:table; 元件。

请注意，当使用vertical-align: middle;时，分配给父元素的line-height值也会起作用vertical-align: middle; 在它的孩子上。

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