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

Twitter Bootstrap 3 でコンテンツを垂直方向に中央揃えにする

Bootstrap 3 で動的コンテンツを操作する場合、共通の課題はテキストと画像の両方を垂直方向に中央揃えにすることです。特にサイズが異なる場合があります。この応答性の高い垂直方向中央レイアウトを実現する方法は次のとおりです:

解決策:

従来の float プロパティを使用する代わりに、display:inline-block を選択し、垂直方向に適用します。 -align:middle を次の関連要素に配置します。 CSS:

説明:

• display:inline-block を使用すると、高さと幅を適用する機能を維持しながら、要素を並べて配置できます。
• vertical-align:middle は、要素の垂直方向の中心を要素の中央に揃えます。親。
• 負のマージン右は、要素間の間隔を調整して、より洗練されたレイアウトを実現します。

デモ:

ライブの場合デモについては、http://bootply.com/94402 を参照してください。

このソリューションでは、テキストとサイズが動的に変化する場合でも、画像はそれぞれの列内で垂直方向の中央に配置され、応答性が高く視覚的に魅力的なレイアウトを提供します。

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