0

標準のグリッド システムを使用してレスポンシブ Web サイトで作業しているため、div の高さを固定できません。そうは言っても、問題をシミュレートするためにフィドルファイルをセットアップしました。デスクトップの見た目上の理由から最小の高さを 50px に設定し、行の高さも 50 に設定しています。したがって、テキストは div の垂直方向の中央に配置されます。ウィンドウをさらに狭くすると、もちろん最終的にはラインが途切れます。コンテンツが壊れた後、コンテンツを垂直方向に中央に維持して見栄えを悪くする方法はありますか?

コードの一部を次に示します。

.box {
    width: 100%;
    min-height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    background-color: #000;
    text-align: center;
}

ここにフィドルファイルがあります：http://jsfiddle.net/HFAew/

4

1 に答える 1

1

CSS で垂直方向に中央揃えすることはできませんが、さまざまな状況に対していくつかの回避策があります。あなたの場合、display: table; を使用することをお勧めします。ラッパー: http://jsfiddle.net/HFAew/1/

<div class="verticalCentered">
    <div class="box"> test content test content test content test content</div>
</div>

CSS:

.verticalCentered {
    display: table;
    height: 100px; /*variable*/
    width: 100%;
}

.box {
    display: table-cell; /**/
    vertical-align: middle; /**/
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    background-color: #000;
    text-align: center;
}

しかし、時々問題があることを忘れないでください。特定の状況でのみ役立ちます。その他の方法: http://www.vanseodesign.com/css/vertical-centering/

于 2013-02-23T17:58:50.067 に答える