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

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

Bootstrap 3 でテキストと画像を応答性が高く動的に垂直方向に配置するには、次のアプローチを検討してください。 :

CSSコード:

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

説明:

提供された CSS は、元のブートストラップ列に必要な変更を加えます:

• float : none は水平方向の配置を削除し、垂直方向の配置を可能にします。
• 表示: inline-block は、列を垂直方向に配置できるインライン要素として扱います。
• vertical-align: 中央は列内のコンテンツを垂直方向に中央揃えにします。
• margin-right: -4px は、小さな間隔の問題を修正します。間列。

デモ:

[http://bootply.com/94402](http://bootply. com/94402) にアクセスして、この機能のデモンストレーションをご覧ください

追加の注意事項:

• 垂直方向の配置が機能するためにコンテナ要素に十分な高さがあることを確認してください。
• 別の方法が必要な場合は、列サイズを変更するには、それに応じて Col-lg クラスを調整します。
• 画像サイズが異なると問題が発生する場合は、vertical-align プロパティを次のように調整してください。必要です。

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