0

このjsfiddleに注目してください

2列のレイアウトに到達したい。ヘッダーとコンテンツ付き。ヘッダーの高さは固定です。コンテンツは 2 行目の中央に配置する必要があります。しかし、コンテンツを垂直方向に中央揃えする方法がわかりません。

と でコンテンツを割り当てようとしましposition: absoluteたmargin: auto。機能しましたが、ブラウザのサイズを十分に小さく変更すると、テキストがヘッダーの後ろにスライドしました。

divコンテンツを含む 2 番目の行を完全にカバーする人ならうまくいくかもしれませんが、私はこれを管理できません。tableタグは避けたいです。

4

1 に答える 1

1

純粋な CSS ソリューション。使用calc(CSS3)

ワーキングフィドルを参照してください

HTML:

<div class="Site">
    <header class="Header">
        <!-- content -->
    </header>
    <div class="ContentContainer">
        <span class="Centerer"></span>
        <div class="Content">
            <ul style="list-style: none; margin: 0; padding: 0">
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body
{
    height: 100%;
}
.Site
{
    height: 100%;
}
.Header
{
    height: 120px;
    background-color: darkblue;
}
.ContentContainer
{
    background-color: azure;
    height: calc(100% - 120px);
}
 .Centerer
{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
 .Content
{
    display: inline-block;
    vertical-align: middle;
}

OR:よりクリーンなバージョン( calc+ 疑似要素を使用)ワーキング フィドル

<div class="Site">
    <header class="Header">
        <!-- content -->
    </header>
    <div class="ContentContainer">
        <div class="Content">
            <ul style="list-style: none; margin: 0; padding: 0">
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
            </ul>
        </div>
    </div>
</div>

*
{
    margin: 0;
    padding: 0;
}
html, body
{
    height: 100%;
}
.Site
{
    height: 100%;
}
.Header
{
    height: 120px;
    background-color: darkblue;
}
.ContentContainer
{
    background-color: azure;
    height: calc(100% - 120px);
}
.ContentContainer:after
{
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
 .Content
{
    display: inline-block;
    vertical-align: middle;
}
于 2013-09-25T11:27:36.947 に答える