使用 text-align center 将电子邮件表单居中：答案

【问题标题】：Using text-align center to center the email form :使用 text-align center 将电子邮件表单居中：
【发布时间】：2017-06-27 00:00:43
【问题描述】：

我正在尝试使用引导框架（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>

【问题讨论】：

只需将justify-content-center 类添加到<form class="form-inline">---</form>
别忘了指明您使用的是bootstrap 4 alpha。 bootstrap 3 正在使用内联块，因此可以正确显示。 bootstrap 4 使用 display: flex，因此您需要调整计划如何证明您的项目或对齐您的内容。

标签： html css flexbox twitter-bootstrap-4

【解决方案1】：

由于您的表单有display: flex，它跨越了其父表单的整个宽度。

jumbotron 类中的 text-align: center 也不适用于表单元素，因为它们是弹性项目。

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

将其更改为 display: inline-flex（text-align: center 将适用）
添加justify-content: center;（Flexbox 属性以在行方向上水平对齐）

要仅定位 emailbar，请这样做

#emailbar {
  display: inline-flex;
}

或者这个

#emailbar {
  justify-content: center;
}

【讨论】：

【解决方案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*/
}

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>

【讨论】：

【解决方案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>

【讨论】：