Twitter Bootstrap 3 でコンテンツを垂直方向の中央に配置するにはどうすればよいですか?

Twitter Bootstrap 3 でのコンテンツの垂直方向の中央揃え

多くのユーザーは、Twitter Bootstrap 3 内でテキストと画像を垂直方向の中央揃えにする際に課題に直面しています。この記事の内容は次のとおりです。応答性の高い動的コンテンツを活用するソリューションです。

1 つのアプローチは、 float の代わりに display:inline-block プロパティ。これにより、さまざまな画面サイズに対応する能力を維持しながら、コンテンツを垂直方向に整列させることができます。 vertical-align:middle を組み込むことで、テキストと画像の両方が垂直方向の中央に配置されます。

このソリューションを実装するには、次の CSS を追加するだけです:

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

This相対的なサイズに関係なく、テキストと画像の両方が中央に配置されます。

動作デモは次の場所で利用できます。 http://bootply.com/94402。垂直方向の配置を維持しながら、画面解像度の変更にコンテンツがどのように動的に応答するかを示しています。

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