时间戳

首页 > 解决方案 > 水平居中对齐按钮

html - 水平居中对齐按钮

问题描述

我试图在一个简单表单的中心对齐一个复选框和一个提交按钮，我尝试使用“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>

这是输出：

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

用这个，可以单独处理

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

推荐阅读