Question

我无法水平和垂直对齐以下内容。

有人可以告诉我最佳方法吗？

    <div class="container">

  <div class="row">

    <div class="col-md-4">
      <img width="300" src="../assets/medlogo.png">

      <h1 class="text-center login-title">Acessar o programa</h1>
      <div class="account-wall">
        <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Email" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn btn-lg btn-primary btn-block" type="submit">
                  Sign in</button>
        </form>
      </div>

    </div>
  </div>
</div>

谢谢

Answer 1

Bootstrap4现在正在使用css Flexbox，因此你可以使用它。 Flexbox具有开箱即用的垂直和水平对齐支持。

基本上，flexbox容器可以flex-direction为行（默认值）或列。使用前者，属性align-items可用于垂直对齐其子项，justify-content可用于水平对齐。使用后者时，align-items用于水平对齐，justify-content用于垂直对齐。

您可以在此处详细了解Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

试试这个

  <div class=" d-flex justify-content-center align-content-center">
      <img width="300" src="../assets/medlogo.png">

      <h1 class="text-center login-title">Acessar o programa</h1>
      <div class="account-wall">
        <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Email" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn btn-lg btn-primary btn-block" type="submit">
                  Sign in</button>
        </form>
      </div>

    </div>

我删除了col-md-4并将其替换为d-flex justify-content-center align-content-center。这是flexbox的bootstrap 4 beta实用程序。虽然你也可以做直播式

更多信息 http://getbootstrap.com/docs/4.0/utilities/flex/

Bootstrap 4 - 水平和垂直对齐

2 个答案: