Question

我正在尝试创建一个表格，其中每个单元格在左侧包含一个大的浮动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>

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

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

哦和BTW - 做 NOT 使用表格进行布局。这是旧的，它很难看，它不值得。

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

我知道这很难看 - 但它确实有效。

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

2 个答案: