帶縮略圖和網格中的Bootstrap的垂直居中圖像

我想要在網格類和縮略圖類中使用Bootstrap垂直居中的圖像。縮略圖類應該是相同的高度。該段落應該位於圖像下方的同一層。已經嘗試了一切可能，並在互聯網上搜索我還沒有找到合適的解決方案。例如，只有帶有網格或帶有縮略圖的圖像的圖像，但不能與網格和縮略圖結合使用。有沒有人有解決我的問題？帶縮略圖和網格中的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; 
}

來源

2015-05-03 alexvonwolf

所以你想要的文本塊都是一樣的？...我想我有點困惑每張圖片有不同的高度？...我嘲笑了一些告訴我，如果這是接近你的經驗。 http://codepen.io/anon/pen/VLLqZq – FPcond

圖像有不同的高度，因爲有不同組的標誌。 – alexvonwolf

含有.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%);如上面的其他人所建議的，這根本不是最佳實踐。

來源

2015-05-03 00:58:10 Max

帶縮略圖和網格中的Bootstrap的垂直居中圖像

回答

相關問題