好吧,我得到了这个结构:
#parent{
max-width: 800px;
height: auto;
margin: auto;
}
#child{
position: absolute;
width: 100%;
height: 52px;
display: none;
}
<div id="parent">
<div id="child"></div>
</div>
子 div 默认是隐藏的。它通过使用 jQuery (.fadeIn) 变得可见。现在的问题是,如何仅使用 css 使子元素垂直居中?
我已经创建了一个原型...但我必须修改你的 HTML 和 CSS,所以它可能不是最好的解决方案:http://jsfiddle.net/TmCwB/ http://jsfiddle.net/TmCwB/
HTML
<div id="outerDiv">
<div id="parent">
<div id="child"></div>
</div>
</div>
CSS
#outerDiv {
margin: 0 auto;
width: 200px;
}
#parent{
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 500px;
}
#child{
width: 100%;
height: 52px;
display: inline-block;
background-color: blue;
}
希望这可以帮助...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)