Bootstrap 3 でテキストと画像を完全に縦方向に配置するにはどうすればよいですか?

Twitter Bootstrap 3 でのテキストと画像の垂直方向の配置

このトピックに関する問い合わせが多かったにもかかわらず、Twitter Bootstrap 3 でテキストと画像の垂直方向の配置を実現しました。 Twitter Bootstrap 3 は、特に変化する動的コンテンツの場合、わかりにくい場合があります。

この課題に対処するために、相対的なサイズに関係なく、テキストと画像が垂直方向の中央に配置される望ましいレイアウトを示す Bootply デモが作成されました。

解決策は次のとおりです。 text 列と image 列に float の代わりに display:inline-block を採用します。これにより、次の CSS でvertical-align:middle を使用できるようになります:

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

margin-right を負の値に設定することで、垂直方向の配置を維持しながら列が確実に並べて配置されます。 .

このアプローチをテストするには、http://bootply.com/94402 のデモに移動します。ここでは、テキストと画像が垂直方向の中央に正しく配置され、さまざまなコンテンツに適応します。サイズ。

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