垂直对齐内联元素
HTML
<html>
<head>
<style type="text/css">
div {
height: 300px;
width: 300px;
background-color: aqua;
margin-bottom: 10px;
}
div > span {
vertical-align: middle;
background-color: orange;
font-size: 3em;
}
</style>
</head>
<body>
<div>
<span>Hello!</span>
</div>
</body>
</html>
在下图中,Actual是上面呈现的HTML,而Expected是我需要的布局.
CSS属性vertical-align应该以这种方式工作吗？
编辑:
这个问题是不是重复,我想了解的行为vertical-align: middle与inline元素.在上面的情况中,保留或删除上述属性值对HTML布局没有影响.
编辑2:在评论中建议的重复问题的顶部答案中提供的标题" 更通用的方法 " 下的演示在我的浏览器中呈现了不同的布局.我正在运行Google Chrome版本47.0.2526.106(64位).
这是一个关于它在我的浏览器中的外观的快照(与它在演示链接上的外观不同):
在下图中,span元素粘在顶部.
vertical-align 内联元素彼此对齐,它不会将它们放在容器中.
因此,例如,如果你有一个更高的vertical-align: middle内联元素div,那么"Hello"将相对于它居中:
div {
height: 300px;
width: 300px;
background-color: aqua;
margin-bottom: 10px;
}
div > span {
vertical-align: middle;
background-color: orange;
font-size: 3em;
}
.big {
font-size:200px;
}<div>
<span>Hello!</span>
<span class="big">B</span>
</div>有几种技术可以在容器中垂直居中,但这不是一个 - 请参阅如何使用CSS垂直居中文本？