Bootstrap 3 でテキストと画像を垂直方向の中央に配置するにはどうすればよいですか?

Twitter Bootstrap 3 でのテキストと画像の垂直方向の中央揃え (重複)

Twitter Bootstrap 3 でのテキストと画像の垂直方向の配置に関して、多数の問い合わせが行われています。 Twitter Bootstrap 3。このトピックについてはさらに議論する必要があります。

Bootstrap を使用する場合3 動的コンテンツでは、視覚要素の正確なサイズを決定するのが難しい場合があります。さらに、レイアウトは応答性を維持する必要があります。

テキストと画像の両方を垂直方向の中央に配置するには、別のアプローチの採用を検討してください。要素をフローティングする代わりに、要素の表示を inline-block に設定します。さらに、vertical-align:middle を利用して、適切な垂直方向の配置を確保します。

以下は、この手法を示す CSS スニペットの例です。

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

これらの調整を実装することで、簡単に中央に配置できます。コンテンツのサイズが不明な場合でも、テキストと画像を応答性の高い方法で垂直に表示できます。

ライブ デモンストレーションについては、次の Bootply を参照してください。リンク:

http://bootply.com/94402

以上がBootstrap 3 でテキストと画像を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。