我有以下(示例)html 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TH-Alignment</title>
<style type="text/css">
th {
border: 1px solid #333;
vertical-align: middle;
}
div.sb {
float: right;
width: 4px;
height: 26px;
background-color: #999;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<colgroup>
<col width="120" />
<col width="120" />
</colgroup>
<thead>
<tr>
<th>
<div class="sb"></div>
<div>Heading 1</div>
</th>
<th>
<div>Heading 2</div>
</th>
</tr>
</thead>
</table>
</body>
</html>
第二列的div是垂直居中的，第一列的div不是 (始终位于表格单元格的顶部)。为什么里面的 float div 第一列会影响表格单元格中另一个 div 的垂直对齐方式吗？
提前致谢。
最佳答案
如果展开高度为th ，您会注意到元素仍然垂直居中对齐。
查看此 Fiddle Example !
这里的问题是 line-height .
因为您在第一个 th 上有多个元素，其中一个元素有一个 height已定义，所有元素都对齐到 th 的中间但在它们之间，它们与当前 line-height 的高度对齐, 未定义且由 font-size 计算或父元素定义。
因为你的 float 元素有一个 height的 26px ，它向下增长，但文本为 no line-height 的元素定义所以它是height等于 font-size由内部文本提供，因此永远不会到达其 float 兄弟的中间。
要解决这个问题，您需要使用:
line-height: 26px;
设置 line-height等于 height float 元素，从而将文本对齐到 float 元素的中间并解决垂直对齐的视觉方面。
看到这个 Fiddle Example使用那个可行的解决方案!
注意: 一个元素不会像您怀疑的那样影响另一个元素，它们只是没有足够的声明来使它们之间保持一致!
默认情况下，文本和图像与 baseline 对齐, 如果没有 line-height给定，baseline是font-size .
关于html - 表格单元格中的垂直对齐以及 float div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10886912/