如何使用bootstrap將表單元格內容與圖像垂直對齊？

Question

我有一點點複雜的表看起來像這樣

<tr class='row-eq-height'> 
<td><img/><div with text></td> 
<td><img/><div with text></td> 
<td><img/><div with text></td> 
</tr> 

但圖像具有不同的尺寸，所以我加入max-width: 300px給他們。 而現在它看起來像

image  | image 
text  | different text 
some space | different space 

所以我要堅持我的div與文字的底部。我已經嘗試了垂直對齊，但根本沒有幫助。 最後表看起來應該

image  | image 
some space | different space 
text  | different text 

的jsfiddle example

Answer 1

您可以使用flexbox，並設置display: flex上tr使每個td相等的高度和justify-content: space-between與在td上的將圖像定位在頂部，文本定位在底部。

tr { 
 
    display: flex; 
 
} 
 
td { 
 
    max-width: 300px; 
 
    border: 1px solid black; 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<table> 
 
    <tr class='row-eq-height'> 
 
    <td><img src="http://placehold.it/150x150"><div>Lorem ipsum dolor sit amet.</div></td> 
 
    <td><img src="http://placehold.it/150x150"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium repudiandae odit sint iure deleniti!</div></td> 
 
    </tr> 
 
</table>

Answer 2

工作實例http://jsfiddle.net/yg0Lhhju/1/

.parent { 
    display: table; 
    table-layout: fixed; 
} 

.child { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
}