Question

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>

在下图中，实际是上面呈现的 HTML ，预期是我需要的布局。

CSS属性vertical-align应该以这种方式工作吗？

修改：

这个问题并不重复，我试图了解vertical-align: middle与inline元素的行为。在上面的例子中，保留或删除上述属性值对HTML布局没有影响。

Edit2 ：标题下的demo＆＃34; 更通用的方法＆＃34;在评论中建议的duplicate问题的最佳答案中显示了我浏览器中的不同布局。我正在运行Google Chrome版本47.0.2526.106（64位）。

这里有一个关于它在我的浏览器中的外观（与它在演示链接上的外观不同）的快照：

在下图中，span元素粘贴在顶部。

Answer 1

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>

有几种技术可以在容器中垂直居中，但这不是一种 - 请参阅How do I vertically center text with CSS?

Answer 2

https://jsfiddle.net/x0gc91ch/1/

添加line-height: 300px

到div css，因为你试图对齐到默认行高的中间位置，它不如父div高。

垂直对齐内联元素

2 个答案: