当表格单元格不包含垂直对齐CSS声明时，它包含一个浮动元素

我想创建一个表格，其中每个单元格包含左侧大浮动h1和大量的小文本到大文本的权利，垂直居中。当表格单元格不包含垂直对齐CSS声明时，它包含一个浮动元素

但是，小文本显示在每个单元格的顶部，尽管它具有“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>

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

来源

2010-04-14 Elias Zamaria

我能够重现问题...现在的解决方案... – 2010-04-14 23:07:00

+1，有趣的问题。 – 2010-04-14 23:16:46

对不起，没有线索为什么这样做。

，但可以将其更改为以下：

<!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>

我知道它是丑陋的 - 但它的作品。

来源

2010-04-14 23:12:38

我试过了，它的工作原理。我宁愿更优雅的方式，但我可能不得不这样做。 – 2010-04-14 23:38:24

这是因为<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>

哦，顺便说一句 - 做不使用表格来布局。它很古老，很丑，不值得。

来源

2010-04-14 23:24:25

干得好。不知道为什么这对我不起作用......可能我错过了'align：middle'部分。 – 2010-04-14 23:26:37

谢谢。我试过这个，它似乎工作。但是，如果小文本包装到多行，它看起来很有趣。它不是垂直对齐，而是在h1之下。如果你愿意，我可以发表一个例子。 – 2010-04-14 23:39:13

默认情况下，文本将环绕浮动元素。 – 2010-04-14 23:47:17

当表格单元格不包含垂直对齐CSS声明时，它包含一个浮动元素

回答

相关问题