表格单元格在包含浮动元素时不遵守垂直对齐 CSS 声明答案

【问题标题】：Table cell doesn't obey vertical-align CSS declaration when it contains a floated element表格单元格在包含浮动元素时不遵守垂直对齐 CSS 声明
【发布时间】：2010-04-15 08:22:49
【问题描述】：

我正在尝试创建一个表格，其中每个单元格在左侧包含一个大的浮动 h1，在大文本的右侧有大量的小文本，垂直居中。

然而，小文本显示在每个单元格的顶部，尽管它有一个“vertical-align: middle”声明。当我删除大浮动元素时，一切看起来都很好。我在 IE、Firefox 和 Safari 的最新版本中对其进行了测试，并且在每种情况下都会发生这种情况。

为什么会这样？有谁知道解决方法？这是一个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>vertical-align test</title>
<style type="text/css">
td {
    border: solid black 1px; vertical-align: middle; font-size: 12px}
h1 {
    font-size: 40px; float: left}
</style>
</head>
<body>
<table>
    <tr>
        <td><h1>1</h1>The quick brown fox jumps over the lazy dog.</td>
        <td>The quick brown fox jumps over the lazy dog.</td>
    </tr>
</table>
</body></html>

请注意，由于某种原因，第一个单元格中的小文本位于顶部，但第二个单元格中的文本垂直居中。

【问题讨论】：

我能够重现问题...现在寻求解决方案...
+1，有趣的问题。

标签： css

【解决方案1】：

这是因为<h1> 元素是块元素，而随意的文字是内联。所以你必须强制<h1> 表现得像一个内联元素，顺便说一句，这意味着没有浮动。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>vertical-align test</title>
<style type="text/css">
td {
    border: solid black 1px; font-size: 12px}
h1{
   display:inline;font-size: 40px;vertical-align: middle;}
</style>
</head>
<body>
<table>
   <tr>
     <td><h1>1</h1>The quick brown fox jumps over the lazy dog.</td>
     <td>The quick brown fox jumps over the lazy dog.</td>
  </tr>
</table>
</body></html>

哦，顺便说一句 - 不使用表格进行布局。老了，丑了，不值得了。

【讨论】：

干得好。不知道为什么这对我不起作用...可能我错过了align:middle 部分。
谢谢。我试过这个，它似乎工作。但是，如果小文本超过一行，它看起来很有趣。它不是垂直对齐，而是位于 h1 下方。如果你愿意，我可以发布一个例子。
默认情况下，文本会环绕浮动元素。
我通常不喜欢使用表格进行布局，但我正在尝试使框具有相同的高度，这似乎是最简单的方法，可以在所有流行的浏览器中可靠地工作.
很高兴它成功了，但请选择一些答案，否则它会一直显示为“未回答”

【解决方案2】：

抱歉，不知道为什么会这样。

但是你能不能把它改成下面这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>vertical-align test</title>
<style type="text/css">
td {
    border: solid black 1px; vertical-align: middle; font-size: 12px}
h1 {
    font-size: 40px; float: left}
</style>
</head>
<body>
<table>
    <tr>
        <td>
           <table><tr><td style='border: 0px;'><h1>1</h1></td><td style='border: 0px;'>
           The quick brown fox jumps over the lazy dog.</td></tr></table></td>
        <td>The quick brown fox jumps over the lazy dog.</td>
    </tr>
</table>
</body></html>

我知道这很丑 - 但它有效。

【讨论】：

我试过了，效果很好。我更喜欢更优雅的方式，但我可能不得不这样做。