ボタンを水平方向の中央に揃える

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

出力は次のとおりです。

html

css

bootstrap-4

回答 2 件

  • これを使用して、個別に処理できます

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

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

あなたの答え

関連記事