Utilisation du centre d'alignement de texte pour centrer le formulaire de courrier électronique:

Question

J'essaie de créer une page d'atterrissage d'application à l'aide d'un cadre d'amorçage (Bootstrap 4 alpha). Tout en essayant d'aligner tout au centre, j'ai utilisé text-align:center dans jumbotron id. Tout sauf le formulaire e-mail aligné.

Y a-t-il un moyen d'aligner le formulaire de courrier électronique au centre et de s'assurer qu'il reste au centre quelle que soit la largeur de la page Web.

Ceci est le code dans la feuille de style.

.jumbotron 
{ 
    background-image: url(background.jpg); 
    text-align: center; 
    margin-top: 50px; 
} 

Ceci est le code principal.

<div class="jumbotron" id="jumbotron"> 
    <h1 class="display-3">My Awesome App!</h1> 
    <p class="lead">This is why YOU should download this fantastic app!</p> 
    <hr class="m-y-2"> 
    <p>Want to know more? Join our mailing list!</p> 

    <form class="form-inline" id = "emailbar"> 
     <div class="form-group"> 
      <label class="sr-only" for="email">Email address</label> 
      <div class="input-group"> 
       <div class="input-group-addon">@</div> 
       <input type="email" class="form-control" id="email" placeholder="Your email"> 
      </div> 
     </div> 
     <button type="submit" class="btn btn-primary">Sign up</button> 
    </form> 
</div> 

Answer 1

Étant donné que votre formulaire a display: flex il couvre toute la largeur de son parent.

De plus, le text-align: center de votre classe jumbotron ne s'applique pas à l'élément forms car ce sont des éléments flex.

changer si l'une de ces dans votre form-inline classe

• changement à display: inline-flex (et le text-align: center appliquera)

• ajouter justify-content: center; (la propriété Flexbox pour aligner horizontalement dans le sens de la ligne)

---

Pour cibler uniquement le emailbar, font comme ça

#emailbar { 
    display: inline-flex; 
} 

ou cette

#emailbar { 
    justify-content: center; 
} 

Answer 2

Ajoutez juste partie à jumbotron css pour obtenir le centre.

.jumbotron { 
    background-image: url(background.jpg); 
    text-align: center; 
    margin-top: 50px; 
    display: flex;/*Add this*/ 
    flex-direction: column; /*Add this*/ 
    align-items: center; /*Add this*/ 
} 

Working fiddle

.jumbotron { 
 
    display: flex;/*Add this*/ 
 
    flex-direction: column; /*Add this*/ 
 
    align-items: center; /*Add this*/ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<div class="jumbotron" id="jumbotron"> 
 
    <h1 class="display-3">My Awesome App!</h1> 
 
    <p class="lead">This is why YOU should download this fantastic app!</p> 
 
    <hr class="m-y-2"> 
 
    <p>Want to know more? Join our mailing list!</p> 
 
    <form class="form-inline" id="emailbar"> 
 
    <div class="form-group"> 
 
     <label class="sr-only" for="email">Email address</label> 
 
     <div class="input-group"> 
 
     <div class="input-group-addon">@</div> 
 
     <input type="email" class="form-control" id="email" placeholder="Your email"> 
 
     </div> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary">Sign up</button> 
 
    </form> 
 
</div>

Answer 3

Il n'y a aucune raison pour CSS supplémentaire. Il suffit d'utiliser justify-content-center sur la forme ...

https://www.codeply.com/go/7LjBkEtvVV

<form class="form-inline justify-content-center" id = "emailbar"> 
    <div class="form-group"> 
     <label class="sr-only" for="email">Email address</label> 
     <div class="input-group"> 
      <div class="input-group-addon">@</div> 
      <input type="email" class="form-control" id="email" placeholder="Your email"> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-primary">Sign up</button> 
</form>