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

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

あなたの答え