[英]vertically aligning div inside div not working
div的内部#inner为何不垂直对齐? 请注意,如果使用的话,我使用的是IE 8和CSS,而不是CSS3。 这是我的html。
<div class="Content">
<div id="home">
<div id="inner">
<div id="stuff">HeadingOne</div>
<div>HeadingTwo</div>
<div>HeadingThree</div>
</div>
</div>
</div>
这是我的CSS
#inner div {
display: inline;
}
#home #inner {
margin: 0px auto;
vertical-align: middle;
}
#home {
display: table-cell;
vertical-align: middle;
text-align:center;
}
如您所见,我尝试进行显示:table-cell; 然后进行垂直对齐:居中,但这没有用。 知道为什么吗? 是的,我需要将“ #inner div”显示为内联。 我希望在#inner内部的div内联并位于Content的中心。
您使用的display
属性不好。 使用此CSS:
#home {
display: table;
text-align:center;
}
#home #inner {
display:table-cell;
height:50px;
background-color:#ccc;
vertical-align: middle;
}
#inner div {
display: inline-block;
}
您可以使用IE8 http://jsfiddle.net/rd2Hc/18/embedded/result/中的示例查看此链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.