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

我有一个HTML表格，每行有两行和两个单元格。
每行中的单元格1都有一个图像占位符。
每行中的单元格2都有一些文本（每个单元格都不相同）。
如何垂直对齐HTML表格单元格中心的数据？

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

我试过v-align属性表，垂直对齐CSS属性，单元格边距，字体较小，较小的图像等

总是得到相同的结果。

来源

2012-01-04 Serge Vinogradov

对于初学者，你不应该使用表格。 – PeeHaa 2012-01-04 16:08:46

我假设你的意思是“不应该”？ – 2012-01-04 16:10:36

ouch，你*真*不应该使用这个表。那就是说：'td'有'vertical-align：baseline' - 如果你把它改成'middle'，它*应该*工作。 – ptriek 2012-01-04 16:10:41

你应该把那个东西到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）。这将这些东西排列在父元素的基线上。

来源

2012-01-04 16:11:00 PeeHaa

确定您输入的属性正确吗？使用Chrome的开发者工具和编辑CSS，这个工作对我来说：

.content td { vertical-align: middle; }

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

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

来源

2012-01-04 16:09:53

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

来源

2012-01-04 16:10:01

vertical-align:middle;在CSS

来源

2012-01-04 16:11:06 Dion

您有：

vertical-align: baseline;

在你的style.css，线15这是防止它看你怎么想它。

来源

2012-01-04 16:11:09 Slavic

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

回答

相关问题