0

我现在正在尝试另一个奇怪且不起作用的东西： child 的垂直自动对齐div。

我希望在中content垂直居中panel，因为in % 适合窗口大小，所以严格对齐对我来说非常重要。panelheight

好的，这是我的代码：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);
}

为什么这么简单的事情行不通？

希望有人可以帮助我，我已经尝试过这些解决方案：边距：自动不能垂直工作？但实际上并没有成功

4

1 回答 1

1

这是一个简单的垂直对齐解决方案，使用纯 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);
}
于 2013-09-29T19:10:52.293 回答