首先,我将列出我的代码和 JSFiddle 的链接。
HTML
<div id="wrapper">
<div id="container">
<div id="content">
Here is the content
</div>
</div>
</div>
JS
body,html{height:100%;}
#wrapper{
height:100%;
background-color:green;
}
#container {
display: inline-block ;
height:100%;
width:100%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#content
{
display:inline-block;
background-color:blue;
}
http://jsfiddle.net/x11joex11/b4ZBg/
(较新的,垂直居中测试内容较多)
http://jsfiddle.net/x11joex11/sDWxN/11/
我想要做的是垂直居中红色 div 中心的蓝色高亮 DIV。有没有办法使用内联 block 而不是表格单元格来做到这一点?
包含的 div 的高度也必须是 100% 而不是设定的像素数量。
内容也将是可变高度
由于浏览器错误,我试图避免显示表格单元格,但如果这是唯一的选择,我也想知道。对此问题的任何解决方案将不胜感激。
最佳答案
内联 block 垂直居中的艺术是理解内联级元素在它们的行框内居中。因此,您需要使行高与包含框的高度匹配。
行高由包含 block 的行高设置和行的内容共同决定。
但是不能按照包含框高度的百分比来设置包含框的行高,所以没有提供解决方案。
相反,我们可以在与要对齐的内容相同的行上创建一些内容,即包含 block 的高度,使用
#container:before {
display:inline-block;
content: '';
height:100%;
vertical-align:middle;
}
这将强制行高足够高以包含该内容。
另一件需要注意的事情是 vertical-align
应用于对齐的框,而不是包含框。
关于html - 垂直对齐内联 block ,高度为 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20809699/