Bootstrap 4 Alignement central Vertical et Horizontal
j'ai une page où seul le formulaire existe et je veux que le formulaire soit placé au centre de l'écran.
<div class="container">
<div class="row justify-content-center align-items-center">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
le justify-content-center aligne la forme horizontalement, mais je ne sais pas comment l'aligner verticalement. J'ai essayé d'utiliser align-items-center et align-self-center , mais ça ne fonctionne pas.
Qu'est-ce que je rate?
DÉMO
5 réponses
Mise À Jour 2018 - Bootstrap 4.0.0
il y a pas besoin pour extra CSS . Ce qui est déjà inclus dans Bootstrap fonctionnera. S'assurer que le(s) conteneur (s) de la forme sont pleine hauteur . Bootstrap 4 a maintenant une classe h-100 pour une hauteur de 100%...
centre Vertical:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
https://www.codeply.com/go/raCutAGHre
la hauteur du conteneur avec l'élément(s) pour le centre doit être à 100%
(ou quelle que soit la hauteur désirée par rapport à l'objet centré)
Note: lorsqu'on utilise height:100% ( hauteur en pourcentage ) sur un élément quelconque, l'élément prend la valeur hauteur de son conteneur . Dans les navigateurs modernes vh unités height:100vh; peut être utilisé au lieu de % pour obtenir la hauteur désirée.
centre Horizontal:
-
text-centercentredisplay:inlineles éléments et le contenu de la colonne -
mx-autopour centrage intérieur éléments flex -
offset-*oumx-autopeut être utilisé pour colonnes centrales (.col-) -
justify-content-centerà colonnes centrales (col-*) à l'intérieur derow
Centre D'alignement Vertical dans Bootstrap 4
Bootstrap 4 forme centrée plein écran
Bootstrap 4 groupe d'entrée du centre
vous avez besoin de quelque chose pour centrer votre formulaire. Mais parce que vous n'avez pas spécifié une hauteur pour votre html et votre corps, il envelopperait simplement le contenu - et pas le viewport. En d'autres termes, il n'y avait pas de place où centrer l'article.
html, body {
height: 100%;
}
.container, .row.justify-content-center.align-items-center {
height: 100%;
min-height: 100%;
}
ce travail pour moi:
<section class="h-100">
<header class="container h-100">
<div class="d-flex align-items-center justify-content-center h-100">
<div class="d-flex flex-column">
<h1 class="text align-self-center p-2">item 1</h1>
<h4 class="text align-self-center p-2">item 2</h4>
<button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
</div>
</div>
</header>
</section>
flexbox peut vous aider. info ici
<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
<div class="p-2">
1
</div>
<div class="p-2">
2
</div>
</div>
Bootstrap a un centre de texte pour centrer un texte. Par exemple
<div class="container text-center">
vous changez le suivant
<div class="row justify-content-center align-items-center">
au suivant
<div class="row text-center">