0

私は今、別の奇妙で機能しないことを試みています:子の垂直方向の自動配置ですdiv。

contentを内で垂直方向に中央揃えにしたいのですが、 にはウィンドウ サイズに適合する % があるため、厳密に配置することが非常に重要ですpanel。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);
}

なぜこんなに単純なことがうまくいかないのですか？

誰かが私を助けてくれることを願って、私はこれらの解決策を試しました: margin : auto not working vertical? しかし、実際にはうまくいきませんでした

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 に答える