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，因此它会覆盖其父级的整个宽度。

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

因此，在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*/
}

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

使用文本对齐中心将电子邮件表单置于中心位置：

3 个答案: