Twitter Bootstrap 3、コンテンツを垂直中央に配置 [重複]

Question

この質問にはすでにここに答えがあります:

Bootstrap 3 で垂直方向に整列する (回答数 23)

閉まっている 5年前.

これは何千回も質問されたことは知っていますが、テキストと画像を垂直方向の中央に配置する方法が見つかりません。

私は動的コンテンツで Twitter Bootstrap 3 を使用しているため、テキストと画像のサイズがわかりません。さらに、すべてをレスポンシブにしたいと考えています。

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

誰かがこれについて私を助けてくれませんか？

ありがとう。

Answer 1

使用できます display:inline-block の代わりに float そして vertical-align:middle この CSS を使用すると:

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

デモ http://bootply.com/94402

Answer 2

オプション1 使うことです display:table-cell. 。次を使用して Bootstrap Col-* をアンフロートする必要があります float:none..

.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

---

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