Question

我想在网格类和缩略图类中使用Bootstrap垂直居中的图像。缩略图类应该是相同的高度。并且段落应该在图像下方的同一级别。尝试了一切可能，并在互联网搜索我找不到合适的解决方案。示例中只有带网格的图像或带缩略图的图像，但不与网格和缩略图组合。有没有人能解决我的问题？

<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;的子元素时也会产生影响。

我不建议其他人使用top: 50%; transform: translateY(-50%);作为上述建议，但这不是最佳做法。

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

1 个答案: