コンテナ内でボタンを正常に中央に配置できません

bugfix> css > 投稿

ブートストラップ4を使用していますが、ボタン/リンクを適切に中央に配置することができません- text-center をどのように使用しようとしてもクラス（divまたはリンク上で囲む）

<div class="row text-center">
  <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>

ここにコードペン： https://codepen.io/anon/pen/GdbPyr

css

twitter-bootstrap

回答 2 件

  • 追加するだけ： justify-content-center  親コンポーネントに。コードは次のようになります。

    <!-- ******Key Features****** -->
<section class="key-features ">
  <div class="container pt-4">
    <div class="row justify-content-center"style="background: red">
      <a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
    </div>
  </div>
</section>

    作業ペン：https://codepen.io/manAbl/pen/bMPOJM?editors=1000;

    -ヒントを示すためだけに背景を追加しました。これは本当に助けになり、時々視点を持たせることができます-

    希望が役立ちます:)

  • text-center を交換できます  あなたの btn に   mx-auto と  左右の余白を強制する：

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="key-features ">
  <div class="container pt-4">
    <div class="row">
      <a class="btn btn-primary mx-auto" href="{% url "users:postcode" %}">Get Started</a>
    </div>
  </div>
</section>

あなたの答え

関連記事