表格单元格没有'；当包含浮动元素时，不遵守垂直对齐CSS声明_Css

表格单元格没有'；当包含浮动元素时，不遵守垂直对齐CSS声明

css

表格单元格没有'；当包含浮动元素时，不遵守垂直对齐CSS声明,css,Css,我试图创建一个表格，其中每个单元格的左侧包含一个大的浮动h1，在大文本的右侧包含大量的小文本，垂直居中但是，小文本显示在每个单元格的顶部，尽管它有一个“垂直对齐：中间”声明。当我移除大的浮动元素时，一切看起来都很好。我在IE、Firefox和Safari的最新版本中对其进行了测试，每次都是这样为什么会这样？有人知道怎么绕过它吗？以下是一个例子： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt

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

但是，小文本显示在每个单元格的顶部，尽管它有一个“垂直对齐：中间”声明。当我移除大的浮动元素时，一切看起来都很好。我在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>


垂直对齐测试
运输署{
边框：纯黑1px；垂直对齐：中间；字体大小：12px}
h1{
字体大小：40px；浮点：左}
敏捷的棕色狐狸跳过懒惰的狗。
敏捷的棕色狐狸跳过了懒狗。

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

对不起，不知道为什么会这样

但是你能把它改成以下内容吗

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


垂直对齐测试
运输署{
边框：纯黑1px；垂直对齐：中间；字体大小：12px}
h1{
字体大小：40px；浮点：左}
1.
敏捷的棕色狐狸跳过了懒狗。
敏捷的棕色狐狸跳过了懒狗。

我知道它很难看，但它很有效。

这是因为

元素是块元素，而临时文本是内联的。因此，您必须强制
像一个内联元素一样工作，顺便说一下，这意味着没有浮动
代码如下：

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

垂直对齐测试运输署{ 边框：纯黑1px；字体大小：12px} h1{ 显示：内联；字体大小：40px；垂直对齐：中间；} 敏捷的棕色狐狸跳过懒惰的狗。敏捷的棕色狐狸跳过了懒狗。

哦，顺便说一句-不要使用表格进行布局。它很旧，很难看，不值得这么做。
我能够重现这个问题。。。现在是解决方案…+1，有趣的问题。干得好。不知道为什么那对我不起作用。。。可能我错过了对齐：中间部分。谢谢。我试过这个，它似乎有效。但是，如果小文本换行到多行，则看起来很有趣。它不是垂直对齐，而是位于h1下方。如果您愿意，我可以发布一个示例。默认情况下，文本将环绕浮动元素。我通常不喜欢使用表格进行布局，但我正在尝试使框具有相同的高度，这似乎是最简单的方法，在所有流行的浏览器中都能可靠地工作。很高兴它能工作，但请选择一些答案，否则它会一直出现“未回答”的问题。我尝试了，它工作了。我更喜欢更优雅的方式，但我可能不得不这样做。