1

ここに示されているように（http://jsfiddle.net/d4wUu/）、「テスト中」という単語が含まれる赤い枠のボックスを、それを含むブラックボックスの高さに沿って中央に配置することができませんでした。ブラックボックスの上部の境界線に揃えられたままで、その下にスペースが残ります。

margin-topどちらも機能していません。ここで赤い枠のボックスをどのように取得するmargin: autoか、またはmargin-top（それを含むブラックボックスに関して）作業する方法はありますか？

4

3 に答える 3

1

フィドル

それらを追加します：

display: table-cell;
vertical-align: middle;

に#heading。

于 2013-03-09T14:13:51.000 に答える
0

要素を垂直方向に中央に配置する方法はいくつかあります。私の知るmargin: auto限り、ある種のテーブル/テーブルセルスタイルを使用しない限り、要素に対して垂直方向に機能しません。

CSSへのこれらの追加は、CSSを垂直方向に中央揃えする1つの方法です。

#heading {  
    position:relative;
}
#heading-title {
    position:absolute;
    top: 50%;
    margin-top: -25px; /* this is half the height of the element */
}

これが更新されたフィドルで、これが機能していることを示しています。

于 2013-03-09T14:14:51.513 に答える
-1

別の回避策、

margin: 7px autoに与える#heading-title。

これ7pxは、親要素の高さが65ピクセルで、子要素の高さが50ピクセルであるためです。高さの違いがあり15pxます。したがって、との15px間で分割します。margin-topmargin-bottom

この手法は、上記のOPの説明のように、親要素と子要素の高さが固定されている場合にのみ使用できます。

ワーキングフィドル

于 2013-03-09T14:13:35.930 に答える