引导4 CSS -对齐-内容-中心问题

Question

我正试着把每一张表格的中心放在中间。(登录和注册)在各自的列中。第一个可以，第二个不行。

​

​

这是我正在使用的css。它会有什么问题？

<section id="login">
  <div class="container">
    <div class="row">
      <div class="col justify-content-center">
        <div class="w-75" style="background-color: grey;">
          <form>
            <h3>Sign In</h3>
            <label class="sr-only" for="email">Email</label>
            <div class="input-group mb-2 mr-sm-2">
              <input type="email" class="form-control" id="email" placeholder="Email">
            </div>
            <div class="input-group mb-2 mr-sm-2">
              <input type="email" class="form-control" id="password" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary mb-2">Sign In</button>
          </form>
        </div>
      </div>
      <div class="col-1 justify-content-center" style="background-color: grey;">
        <h2>OR</h2>
      </div>
      <div class="col justify-content-center">
        <div class="w-75" style="background-color: grey;">
          <form>
            <h3>Sign Up</h3>
              <label class="sr-only" for="email">Email</label>
              <div class="input-group mb-2 mr-sm-2">
                <input type="email" class="form-control" id="email" placeholder="Email">
              </div>
              <div class="input-group mb-2 mr-sm-2">
                <input type="email" class="form-control" id="password" placeholder="Password">
              </div>
              <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

我不确定你想要水平中心还是垂直中心。最简单的到水平中心的方法是在内部的w-75 div上使用mx-auto (自动边距)。

https://www.codeply.com/go/orlziQBanZ

<div class="container">
        <div class="row align-items-center">
            <div class="col">
                <div class="w-75 mx-auto" style="background-color: grey;">
                    <form>
                        <h3>Sign In</h3>
                        <label class="sr-only" for="email">Email</label>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">Sign In</button>
                    </form>
                </div>
            </div>
            <div class="col-1 mx-auto">
                <h2 class="text-center">OR</h2>
            </div>
            <div class="col">
                <div class="w-75 mx-auto" style="background-color: grey;">
                    <form>
                        <h3>Sign Up</h3>
                        <label class="sr-only" for="email">Email</label>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

align-items-center在row上用于垂直对中。

Answer 2

要为列启用flexbox (从而使justify-content-center类工作)，您需要将d-flex类添加到每个列中，如下面的代码片段所示。

如果您只想在"OR“文本这样的列中对文本进行居中，那么您只需要该列的text-center类。

注意:当列太窄，无法容纳内容时，"OR“文本将从列中挤压出来。因此，您应该在那里使用响应列类，对其他列也使用响应列类。因为当屏幕变小时，您可能希望它们堆叠起来。

下面是代码片段(没有响应的列类，即基于您的代码)：

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section id="login">
    <div class="container">
        <div class="row">
            <div class="col d-flex justify-content-center">
                <div class="w-75" style="background-color: grey;">
                    <form>
                        <h3>Sign In</h3>
                        <label class="sr-only" for="email">Email</label>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">Sign In</button>
                    </form>
                </div>
            </div>
            <div class="col-2 text-center" style="background-color: grey;">
                <h2>OR</h2>
            </div>
            <div class="col d-flex justify-content-center">
                <div class="w-75" style="background-color: grey;">
                    <form>
                        <h3>Sign Up</h3>
                        <label class="sr-only" for="email">Email</label>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="input-group mb-2 mr-sm-2">
                            <input type="email" class="form-control" id="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>    

​