Bootstrap における垂直方向と水平方向のセンタリングに関する簡単な説明

この記事では、Bootstrap3 と Bootstrap4 の垂直方向と水平方向のセンタリングについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: 「ブートストラップ チュートリアル」

ブートストラップを水平方向に中央揃えにします

// 文本：

class ="text-center"

// 图片居中：

class = "center-block"

//其他元素：

//bootstrap3水平居中：利用bootstrap列偏移

class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4"

// bootstrap4水平居中：

class = "m-auto"

Bootstrap の垂直方向の中央揃え

bootstrap3 div 内を垂直方向の中央揃えにする方法:

Bootstrap のグリッド システムは、float:left のフローティング メソッドと、vertical-align のフローティング メソッドを使用します。属性は機能しません。そのため、次のように内部 div の float 属性をクリアし、display 属性を追加します。

.middle {

   float: none;

   display: inline-block;

   vertical-align: middle;

}

Bootstrap3 ログイン ボックスの適応的な水平方向のセンタリングと垂直方向のセンタリング

https:// blog.csdn.net/ shenzhen_zsw/article/details/75331515

Bootstrap4 div を垂直方向に中央揃えにする方法:

要素の高さを設定します

.login-center {

 height: 100vh;

}

Apply .align- items-center は要素を垂直方向に中央揃えにします:

<div class="row align-items-centerjustify-content-center login-center">
 
…
 
</div>

Application.justify-content-center は要素を水平方向に中央揃えにします:

効果:

プログラミング関連の知識をさらに知りたい場合は、プログラミング教育をご覧ください。 ！

以上がBootstrap における垂直方向と水平方向のセンタリングに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。