如何垂直对齐表格单元格中的图像和文本？
Posted
技术标签:
【中文标题】如何垂直对齐表格单元格中的图像和文本？【英文标题】：How to vertically align image and text in table cell? 【发布时间】：2017-05-30 02:06:38 【问题描述】：我试图让文本位于右侧并与图像垂直居中对齐。我该怎么做？
我当前的代码：
<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
【参考方案1】：
使用 CSS3 Flexible Box Layout:
来自文档：
提供页面上元素的排列，使得 当页面布局必须适应时，元素的行为可以预测 不同的屏幕尺寸和不同的显示设备。对于很多 应用程序，灵活的盒子模型提供了一个改进 块模型，因为它不使用浮点数，也不使用 flex 容器的边距与其内容的边距一起折叠。
右侧居中文本的示例如下所示
#pageElementdisplay: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 >
<td valign="bottom">
<img style="width:100%" src="https://s.w.org/images/home/screen-themes.png?1"/> </td>
<td align="center" valign="center"> text dddddddddddd </td>
</tr>
</table>
</body>
以 JsFiddle 为例： https://jsfiddle.net/bndr6x4y/1/
【讨论】：
以上是关于如何垂直对齐表格单元格中的图像和文本？的主要内容，如果未能解决你的问题，请参考以下文章