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

所以我想把文字放在底部。我已经尝试过垂直对齐，但它根本没用。最后表应该是那样的

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

jsfiddle example

Answer 1

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

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

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

Answer 2

您可以使用flexbox并在display: flex上设置tr以使td每个justify-content: space-between等于flex-direction: column td tr { display: flex; } td { max-width: 300px; border: 1px solid black; display: inline-flex; flex-direction: column; justify-content: space-between; }将图像放在顶部，将文本放在底部。

＆＃13;

<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>

＆＃13;

KeyguardManager keyguardManager = (KeyguardManager) context.getSystemService(Context.KEYGUARD_SERVICE);
    return keyguardManager.isKeyguardSecure();

＆＃13;

如何使用引导程序将表格单元格内容与图像垂直对齐？

2 个答案: