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

【问题标题】：How to vertically align image and text in table cell?如何垂直对齐表格单元格中的图像和文本？
【发布时间】：2026-02-01 13:05:01
【问题描述】：

我试图让文本位于右侧并与图像垂直居中对齐。我该怎么做？

我当前的代码：

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

【问题讨论】：

图片下方？无法使用您当前的代码重新创建它：jsfiddle.net/31yoxzfb
我不认为它在下面，它可能只是底部对齐，尝试将vertical-align: top; 或middle 添加到单元格中。
@Pangloss，是的，谢谢你这样做。
@TimAkgayev 很高兴听到这个消息，我只是将其发布为包含更多详细信息的答案。
Possible duplicate of Vertical align an image and a multiline text

标签： html css vertical-alignment css-tables

【解决方案1】：

使用 CSS3 Flexible Box Layout:

来自文档：

提供页面上元素的排列，使得当页面布局必须适应时，元素的行为可以预测不同的屏幕尺寸和不同的显示设备。对于很多应用程序，灵活的盒子模型提供了一个改进块模型，因为它不使用浮点数，也不使用 flex 容器的边距与其内容的边距一起折叠。

右侧居中文本的示例如下所示

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

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

我发现这个cheat-sheet 非常有用，并且您发现here 的浏览器兼容性

【讨论】：

这实际上似乎是最好的方法，但是我的文本现在位于顶部而不是中心。为什么？
如果你清除所有可能干扰#pageElement的css样式并且它是内部div，它必须看起来像上面的例子

【解决方案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>

【讨论】：

【解决方案3】：

使用 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/

【讨论】：