在縮略圖和網格中具有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%); 正如上面其他人所建議的那樣，這根本不是最佳實踐。