使用文本合格中心将电子邮件表中心:

Question

我正在尝试使用Bootstrap Framework(Bootstrap 4 alpha(制作应用程序着陆页。在试图对齐中心的所有内容时，我在Jumbotron 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也不适用于表单元素，因为它们是flex项目。

所以在您的form-inline类中更改其中的任何一个

• 将其更改为display: inline-flex(并且text-align: center将适用(

• 添加 justify-content: center;(flexbox属性以水平为单位对齐(

---

仅针对emailbar，请喜欢

#emailbar {
  display: inline-flex;
}

或此

#emailbar {
  justify-content: center;
}

Answer 2

只需在jumbotron中添加CSS零件即可获取中心。

.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*/
}

工作小提琴

.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>