如何使用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; 
}