gpt4 book ai didi

css - 表格单元格在包含 float 元素时不遵守垂直对齐 CSS 声明

转载 作者:太空狗 更新时间:2023-10-29 12:38:48 25 4
gpt4 key购买 nike

我正在尝试创建一个表格,其中每个单元格的左侧都有一个大的 float h1,大文本的右侧有大量的小文本,垂直居中。

然而,小文本显示在每个单元格的顶部,尽管它有一个“vertical-align: middle”声明。当我删除大的 float 元素时,一切看起来都很好。我在最新版本的 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>

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

最佳答案

这是因为 <h1>元素是一个 block 元素,随意文本是内联。所以你必须强制<h1>表现得像一个内联元素,顺便说一下,这意味着没有 float

代码如下:

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

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

关于css - 表格单元格在包含 float 元素时不遵守垂直对齐 CSS 声明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2641615/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com