リンクの中央寄せができません

Question

前提・実現したいこと

LP模写をしています。
調べていろいろ追加したせいかどれが必要で何が足りないのかわからない状態です。
<a>タグにボーダーで囲ったリンクを中央に寄せたいです。
この状態だと左に寄ってしまいます。

発生している問題・エラーメッセージ

    <div class="btnarea">
     <a class="btn" href="#">詳しく見る</a>
    </div>

.btnarea {
  
}

.btn {
  text-align: center;
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  display: inline-block;
  width: 189px;
  border: solid 2px #afafb1;
  padding: 10px 0;
  margin: 0 ;
  text-decoration: none;
}

試したこと

divタグで囲んでdivのcssにtext-align: center;も試しましたが枠内で文字が左寄りになったため.btnに入れ直しました。

Answer 1

こんばんは。

以下のような感じですか？

.btnarea {
  display: flex;
  justify-content: center;
}

Comments

[chapman]

できました。ありがとうございます！