我现在正在尝试另一个奇怪但不起作用的东西:子 div
的垂直自动对齐。
我希望内容
在面板
中垂直居中,因为面板
有一个高度
在适合窗口大小的 % 中,严格对齐对我来说非常重要。
好的,这是我的代码:JSFiddle
HTML
<div id="panel">
<div id="content">
</div>
</div>
CSS
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: auto;
background-color: rgba(255,255,255,0.3);
}
#content
{
height: 100px;
width: auto;
background-color: rgba(117,169,56,0.9);
}
为什么这么简单的事情不起作用?
希望有人能帮助我,我已经尝试了这些解决方案:margin : auto not working vertically?但实际上并没有成功
最佳答案
这是一个简单的垂直对齐解决方案,使用纯 CSS 而不固定任何顶部边距和顶部填充。所以它完全响应。
查看此 Working Fiddle
HTML:(相同)
<div id="panel">
<div id="content">
</div>
</div>
CSS:
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
}
/*this is new*/
#panel:before
{
content: '';
height: 100%;
margin-left: -5px;
vertical-align: middle;
display: inline-block;
}
#content
{
vertical-align: middle; /*this is new*/
display: inline-block; /*this is new*/
height: 100px;
width: 100%; /*this is new*/
background-color: rgba(117,169,56,0.9);
}
关于html - Div 内的垂直自动边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19071634/