html - div コンテンツの垂直方向の中央揃えが機能しない

Question

div 内のコンテンツの垂直方向の配置に関する多くの回答を読み、私が見た主要な回答を実装しようとしました:

.middle-col{
   vertical-align: middle; 
   display: table-cell;

}

しかし、うまくいきません。

http://jsfiddle.net/aKybp/4/を参照してください。

これはブートストラップに基づいて構築されているため、HTML の結果を左に展開して div を表示する必要があります。

私が達成しようとしているのは、中央の列のコンテンツを垂直方向に中央揃えにすることです

score 1 · Accepted Answer

あなたの真ん中の列は、完全な高さまで広がっていない別のコンテナの中にありました. 次の設定はそれを修正します (.middle-col要素もその親とマージされました)。

.middle-col {
    vertical-align: middle;
}
.row > .col-md-6, .row > .col-md-3 {
    display: table-cell;
    float: none;
}

score 0 · Accepted Answer

あなたの div コンテナは、実際にはテキストを垂直方向に整列させています。あなたの問題は、div コンテナーの高さがラップするテキストコンテンツよりも大きくないことです。

画像に対してテキストを垂直方向にセンタリングするには、div-container の高さを 480px (画像の高さ) などに設定する必要があります。

.middle-col {
    vertical-align: middle; 
    display: table-cell;
    height: 480px;
}

2 に答える 2