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

Question

我正在尝试使用 bootstrap 框架（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 class 中的 text-align: center 也不会应用于表单元素，因为它们是弹性项目。

因此，请在 form-inline class

中更改其中任何一个

将其更改为 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*/
}

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>

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

Using text-align center to center the email form :

html

css

flexbox

twitter-bootstrap-4