ボタン内の文字が真ん中にこない

Question

<btn>タグ内の<p>が上下左右真ん中にきません
（左右は真ん中なのですが・・・）

解決方法ご教示ください！！

        <div class="btn">
          <a href="#" class="btn more"><p>View more</p></a>
        </div>

.more {
  width:235px;
  height:60px;
  font-size:16px;
  text-decoration:none;
  display:block;
  text-align:center;
  margin: 0 auto;
  color:#171717;
  background-color:#F7D43F;
  border-radius:30px;
  box-shadow: 0 0 14px 4px rgba(0, 0, 0, 0.5);

}

Answer 1

Flexboxを使って解決することもできます。
この方法なら、ボタンの横幅と高さが変わっても常に中央に配置されます。

aタグ単体でもボタンとしての表示は再現できるので、最小のソースを記載致します。

<a href="#">View more</a>

a {
    display: flex;
    justify-content: center;
    align-items: center;
}

あとは適宜、ボタンと文字の大きさや色をご指定ください。

Answer 2

line-height: 60px;

heightで指定した分line-heigthを確保してあげれば上下真ん中にきます