Html 与内联元素垂直对齐_Html_Css

Html 与内联元素垂直对齐

html css

Html 与内联元素垂直对齐,html,css,Html,Css,HTML <html> <head> <style type="text/css"> div { height: 300px; width: 300px; background-color: aqua; margin-bottom: 10px; }

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>


div{
高度：300px；
宽度：300px；
背景色：浅绿色；
边缘底部：10px；
}           
div>span{
垂直对齐：中间对齐；
背景颜色：橙色；
字号：3em；
}    
你好

在下图中，Actual是上面的HTML呈现的内容，Expected是我需要的布局

CSS属性

vertical align

应该以这种方式工作吗

编辑：

这个问题不是重复的，我试图理解

verticalign:middle

与

inline

元素的行为。在上述情况下，保留或删除上述属性值对HTML布局没有影响

Edit2：评论中建议的问题的顶部答案标题“一种更通用的方法””下的标题在我的浏览器中呈现了不同的布局。我正在运行Google Chrome 47.0.2526.106版（64位）

以下是它在我的浏览器中的外观快照（与演示链接上的外观不同）：

在下图中，

span

元素粘在顶部

添加

行高：300px

对于div css，因为您试图对齐到默认行高度的中间，而默认行高度没有父div高。

垂直对齐将内联元素彼此对齐，但不会将它们放置在容器中
因此，例如，如果在同一个div
中有一个较高的垂直对齐：中间内联元素，“Hello”将相对于它居中：

div{
高度：300px；
宽度：300px；
背景色：浅绿色；
边缘底部：10px；
}
div>span{
垂直对齐：中间对齐；
背景颜色：橙色；
字号：3em；
}
.大{
字体大小：200px；
}

你好
B
查看以了解为什么垂直对齐：中间
不在包含块的中间居中，并了解如何改为居中。关于您的第二次编辑，我无法在Firefox 47和Chromium 50上重现这一点。如果你真的能重现，并且想知道它是否是一个bug，是否已经修复，等等，最好问一个新问题。