當表格單元格不包含垂直對齊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聲明時，它包含一個浮動元素

回答

相關問題