Question

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

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

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

始终获得相同的结果。

Answer 1

CSS中的

vertical-align:middle;

Answer 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）。这会将东西变为父元素的基线。

Answer 3

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

.content td { vertical-align: middle; }

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

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

Answer 4

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

Answer 5

你有：

vertical-align: baseline;

在你的style.css第15行。这样就无法查看你想要它的样子。

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

5 个答案: