CSS - vertical-align不工作 [英] CSS - vertical-align not working
问题描述
我有一些真的基本HTML& CSS：
这是HTML：
<！DOCTYPE html> ;
< html>
< head>
< meta charset =UTF-8>
< link rel =stylesheetmedia =allhref =stylesheet.css>
< title> Hello，World！< / title>
< / head>
< body>
< header>
Hello< sup> World< / sup>
< / header>
< / body>
< / html>
这里是CSS：
header {
vertical-align：middle;
height：60px;
background-color：＃00F;
}
但是文本没有在中间对齐。为什么不呢？
vertical-align 属性仅适用于：
内部级和表格单元格
请参阅此链接。 p>
您可以使用 line-height 垂直居中的文本，只是使其大于实际的 font-size
或者，您可以在顶部添加 padding
根据注释编辑：明显的解决方案如果使用HTML5 code> header 元素将使它 display：table-cell; 而不是默认块，我认为reset CSS的应用。
I got some really basic HTML & CSS:
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="stylesheet.css">
<title>Hello, World!</title>
</head>
<body>
<header>
Hello<sup>World</sup>
</header>
</body>
</html>
Here's the CSS:
header {
vertical-align: middle;
height: 60px;
background-color: #00F;
}
But the text doesn't get aligned in the middle. Why not?
The vertical-align property only applies to:
inline-level and 'table-cell' elements
See this link.
You could use line-height to vertically center the text, just make it bigger than the actual font-size, however it is only effective if the text spans a single line.
Alternatively you could add padding to the top and bottom of the header element by equal values.
Edited as per comment: the obvious solution if using HTML5 header element would be to make it display: table-cell; instead of the default block which I think the reset CSS's apply.
这篇关于CSS - vertical-align不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
