如何在 HTML 表格单元格的中心垂直对齐数据？答案

【问题标题】：How to vertically align data in the center of a table cell in HTML?如何在 HTML 表格单元格的中心垂直对齐数据？
【发布时间】：2012-01-04 16:05:37
【问题描述】：

我有一个包含两行和每行两个单元格的 HTML 表格。
每行中的单元格 1 都有一个图像占位符。
每行中的单元格 2 都有一些文本（每个单元格中都不同）。

当我将它加载到服务器时，它会显示为图像（单元格 1）与顶部对齐并且文本（单元格 2）低于图像的下边缘。

我已经为表格尝试了v-align 属性、垂直对齐 CSS 属性、单元格填充、更小的字体、更小的图像等。

总是得到相同的结果。

【问题讨论】：

对于初学者，您不应该为此使用表格。
我假设你的意思是“不应该”？
哎呀，你真的不应该为此使用表格。话虽这么说：td 有 vertical-align:baseline - 如果您将其更改为 middle 它应该工作。
@ptriek OMG 我糟透了 bug 时间：P 太晚了，不能再编辑它了 :) 只需使用我的答案来参考我的意思：P

标签： html css

【解决方案1】：

vertical-align:middle; 在 CSS 中

【讨论】：

【解决方案2】：

你应该把那个东西变成li的。

HTML：

<ul class="usps">
  <li>Denver’s Only LOCAL Ad Posting Service.</li>
  <li>Your first week of ad posting is FREE!!!  We are that confident of our ability to post LIVE Ads for your firm!!!</li>
  <li>etc</li>
</ul>

CSS：

ul.usps { list-style-image: url('checkbox.png'); }

你的问题：

那是因为你把vertical-align设置错了（baseline）。这会将内容与父元素的基线对齐。

【讨论】：

【解决方案3】：

您确定您输入的属性正确吗？使用 Chrome 的开发工具并编辑 CSS，这对我有用：

.content td { vertical-align: middle; }

@PeeHaa 是正确的，您不应该为此使用<table>，因为它不是表格数据。这里语义上最正确的选择是<ul> ：

ul li {
    display: block;
    list-style-type: none;
}

【讨论】：

【解决方案4】：

从您的 tr 定义中删除 vertical-align:baseline。然后，为了保持间距，添加height: 65px;

【讨论】：

【解决方案5】：

你有：

vertical-align: baseline;

在你的 style.css 中，第 15 行。这会阻止它看起来你想要的样子。

【讨论】：