如何在表格单元格中垂直对齐图像和文本？

Question

如何在表格单元格中垂直对齐图像和文本？

9

我想让文本在右侧，并与图像垂直居中对齐。我该如何实现？

我的当前代码：

<div style="display: table;">
  <div style="display: table-cell;"><img src="//dummyimage.com/100"></div>
  <div style="display: table-cell;">text</div>
</div>

- Tim Akgayev

无法使用您当前的代码重新创建下面的图像：https://jsfiddle.net/31yoxzfb/ - sinisake

3

我认为它不是在下方，可能只是底部对齐，请尝试向单元格添加 vertical-align: top; 或 middle。 - Stickers

@Pangloss，是的，谢谢你，就是这样。 - Tim Akgayev

@TimAkgayev 很高兴听到这个消息，我刚刚发布了一个带有更多细节的答案。 - Stickers

可能是垂直对齐图像和多行文本的重复问题 - Rob

3个回答

2

在表格单元格中，vertical-align的默认值是baseline。您可以将其更改为middle以进行居中对齐。在MDN上了解更多信息。

.table {
  display: table;
}
.table > div {
  display: table-cell;
  vertical-align: middle;
}

<div class="table">
  <div><img src="//dummyimage.com/100"></div>
  <div>text</div>
</div>

- Stickers

-1

请使用 td、tr 和 table 标签。

<body>
<table>
   <tr width="100%;">
      <td width="50%;" valign="bottom">
      <img style="width:100%" src="https://s.w.org/images/home/screen-themes.png?1"/> </td>
      <td width="50%;" align="center" valign="center">  text dddddddddddd  </td>
   </tr>
</table>
</body>

请参考 JsFiddle 示例： https://jsfiddle.net/bndr6x4y/1/

- Niels Vermeiren

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vickel · Accepted Answer

使用CSS3 弹性盒子布局：

来自文档的说明：

提供元素在页面上的排列，以便当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素表现出可预测的行为。对于许多应用程序来说，弹性盒子模型比块模型更好，因为它不使用浮动，也不会导致弹性容器的边距与其内容的边距折叠。

你想要实现的将文本居中到右侧的示例将如下所示：

#pageElement{display:flex; flex-wrap: nowrap; align-items: center}

<div id="pageElement">
  <div> <img src="//dummyimage.com/100"> </div>
  <div> text </div>
</div>

我发现这个速查表非常有用，您可以在此处找到浏览器兼容性。