メールアライメントを使用して電子メールフォームを中央に配置する：

Question

私は、ブートストラップフレームワーク（ブートストラップ4アルファ）を​​使用してアプリケーションランディングページを作成しようとしています。センターのすべてを整列させようとしているうちに、私はジャンボトロンIDでtext-align:centerを使用しました。電子メールフォームを除くすべてが整列しています。

電子メールフォームを中央で整列させる方法もありますか？また、ウェブページの幅に関係なく中央に配置する方法もありますか。

これはスタイルシートのコードです。

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

これはメインコードです。

<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

フォームにはdisplay: flexが含まれているため、親の全幅にわたっています。

jumbotronクラスのtext-align: centerは、フレックスアイテムであるためフォーム要素には適用されません。

ので（フレキシボックスプロパティは、行方向に水平に整列する）justify-content: center;を追加するには、form-inlineクラス

• display: inline-flexに変更して（とtext-align: centerが適用されます）

• にこれらのいずれかを変更

---

この

#emailbar { 
    display: inline-flex; 
} 

またはこの

#emailbar { 
    justify-content: center; 
} 

Answer 2

のようなだけでセンターを取得するためにjumbotronにCSSの一部を追加するだけemailbarをターゲットにします。

.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

余分なCSSのための理由はありません。ただ、フォーム上のjustify-content-centerを使用して...

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>