web-dev-qa-db-ja.com

Twitter Bootstrap 3、コンテンツを垂直方向に中央に配置

私はこれが何千回も尋ねられたことを知っていますが、テキストと画像を垂直方向に中央揃えにする方法を見つけることができません。

私はTwitter Bootstrap 3を動的コンテンツで使用しているため、テキストも画像もサイズがわかりません。さらに、私はそれがすべて反応するようにしたい。

bootply を作成しました。これは、達成しようとしている種類のレイアウトを要約したものです。基本的に、テキストと画像を垂直方向の中央に配置します。テキストは常に画像よりも大きいとは限りません。

誰かがこれを手伝ってくれますか？

ありがとうございました。

htmlcsstwitter-bootstraptwitter-bootstrap-3
65
Jacques Bourque

このCSSでは、floatおよびdisplay:inline-blockの代わりにvertical-align:middleを使用できます。

.col-lg-4, .col-lg-8 {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

デモhttp://bootply.com/94402

67
DaniP

オプション1はdisplay:table-cellを使用することです。 float:none。を使用して、Bootstrap col- *のフロートを解除する必要があります。

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

http://bootply.com/94394

オプション2は、display:flexであり、フレックスボックスで行を垂直に揃えます：

.row.center {
   display: flex;
   align-items: center;
}

http://www.bootply.com/7rAuLpMCwr

Bootstrap 4では、垂直方向のセンタリングが大きく異なります。 Bootstrap 4についてはこの回答を参照してください https://stackoverflow.com/a/41464397/171456

42
Zim