2

固定高さの div でテキストを中央に配置したい。

次のフィドルを作成しました

<div style="height:180px;border:1px solid black;vertical-align:middle;">
     <h1 style="vertical-align:middle;">Contact</h1> 
</div>

<div style="height:180px;border:1px solid black;vertical-align:middle;">
    <h2>Welcome to the</h2>
    <h1>AAA</h1>
    <h4>system</h4>
</div>

vertical-align:middle のさまざまなオプションをさまざまな要素に適用してみましたが、うまくいかないようです。

line-height が font-size と同じ高さに設定されている他の質問を見ましたが、2 番目の例では、高さが異なる複数行のテキストがあります。

これを行う良い方法はありますか？

4

2 に答える 2

6

慣れているdisplay table-cell

このように

.parent{
    height:180px;border:1px solid black;vertical-align:middle;
    display:table-cell;
}

デモ

andinline cssでクラスを記述するために使用しないでくださいexternal cssdefine css

于 2013-05-08T10:30:07.807 に答える
0

垂直方向の配置には常に問題が伴います。その css プロパティは、div などのブロック要素ではなく、テーブル (td) 要素とインライン要素にのみ適用する必要があります。

真ん中に何かを配置するには、絶対配置を使用するという非常に単純なソリューションを使用できます。

子ブロックを作成し、その位置を絶対に設定し、上から 50% 移動し、margin-top を親の高さの半分に等しい負の値に設定します。親の位置を相対的に設定します。

#parent {
    position: relative;
    height: 180px;
}

#child {
    position: absolute;
    top: 50%;
    margin-top: -90px;
}

<div id="parent">
    <div id="child">
        <h1>sample</h1>
        <h2>sample</h2>
    </div>
</div>
于 2013-05-08T10:28:07.750 に答える