Question

我正在尝试将一个复选框和一个提交按钮对齐在一个简单表单的中心我尝试使用“mx-auto”类来做同样的事情。

但它不起作用

如何在中间或右侧对齐我的提交按钮、复选框？


<div class="container">
    <h3>Please Login</h3>
    <form #userForm="ngForm">
        <div class="form-group">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
                <label for="email">Email address</label>
            </div>
        </div>
        <div class="mx-auto">
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="remember-me" checked>
                    <label class="form-check-label" for="remember-me">
                        Remember Me
                    </label>
                </div>
            </div>
        </div>

        <div id="submit" class="mx-auto">
            <button type="button" type="submit" class="btn btn-primary">LOGIN</button>
        </div>
    </form>
</div>

这是输出：

Answer 1

使用这个，你可以单独处理

<div class="container">
    <h3>Please Login</h3>
    <form #userForm="ngForm">
    <div class="form-group">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
            <label for="email">Email address</label>
        </div>
    </div>
    <div class="row">
    <div class="mx-auto">
      <div class="form-group">
          <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="remember-me" checked>
              <label class="form-check-label" for="remember-me">
                  Remember Me
              </label>
          </div>
      </div>
      
      <div class="form-group">
          <button type="button" type="submit" class="btn btn-primary">LOGIN</button>
      </div>
    </div>
    </div>
</form>

</div>

Answer 2

如果您将 text-center 类添加到您的容器中，则里面的所有内容都将居中对齐。请参阅下面的演示：

 <!-- CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

<div class="container text-center">   <!-- text-center here -->
      <h3>Please Login</h3>
      <form #userForm="ngForm">
        <div class="form-group">
          <div class="form-floating mb-3">
            <input
              type="email"
              class="form-control"
              id="email"
              placeholder="name@example.com"
            />
            <label for="email">Email address</label>
          </div>
        </div>
        <div class="mx-auto">
          <div class="form-group">
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                value=""
                id="remember-me"
                checked
              />
              <label class="form-check-label" for="remember-me">
                Remember Me
              </label>
            </div>
          </div>
        </div>

        <div id="submit" class="mx-auto">
          <button type="button" type="submit" class="btn btn-primary">
            LOGIN
          </button>
        </div>
      </form>
    </div>

在水平中心对齐按钮

2 个答案: