Une brève discussion sur le centrage vertical et horizontal dans Bootstrap

Cet article vous présentera le centrage vertical et horizontal de Bootstrap3 et Bootstrap4. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations de didacticiel associées : "tutoriel bootstrap"

Bootstrap centré horizontalement

// 文本：

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 centré verticalement

bootstrap3 Comment centrer verticalement l'intérieur d'un div :

Le système de grille de Bootstrap utilise la méthode flottante float:left et l'alignement vertical l'attribut ne fonctionne pas Cela fonctionne, alors effacez l'attribut float du div interne et ajoutez l'attribut display, comme suit :

.middle {

   float: none;

   display: inline-block;

   vertical-align: middle;

}

Boîte de connexion Bootstrap3 centrage horizontal adaptatif + centrage vertical

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

Bootstrap4 Comment centrer le div verticalement :

Définir la hauteur de l'élément

.login-center {

 height: 100vh;

}

Appliquer .align- items-center pour rendre l'élément vertical Centrage :

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

L'application justifier-content-center peut centrer l'élément horizontalement :

Effet :

Plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!