【HTML、CSS】ボタンの中に画像を上下や左右から中央寄せするにはどうしたら良いでしょうか

Question

表題の通りです。
コードの書き方が汚いかもしれませんが指摘して頂けると幸いです。
よろしくお願い致します。

  <section class="Bottom_cta">
    <div class="hot_link">
      <a class="btn-get-started scrollto" href="https://" target="_blank">
        <img src="img/hotpepper.png" >
      </a>
    </div>
  </section>

.Bottom_cta {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
}


.Bottom_cta .btn-get-started {
  width: 600px;
  height: 100px;
  display: inline-block;
  font-weight: 400;
  text-align: left;
  border: 4px solid #AE2D5B;
  font-size: 16px;
  color: #9ec34b;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  transition: .4s;
}

.Bottom_cta .btn-get-started:hover {
  border: 8px solid #AE2D5B;
  background-color: #fff;
  border-color: #AE2D5B;
  color: #FFF;

Answer 1

CSS FlexBox を使うといいでしょう。

.Bottom_cta .btn-get-started {
  width: 600px;
  height: 100px;
  display: inline-flex;    /* 修正 */
  justify-content: center; /* 追加 左右中央 */
  align-items: center;     /* 追加 上下中央 */
  font-weight: 400;
  text-align: left;
  border: 4px solid #AE2D5B;
  font-size: 16px;
  color: #9ec34b;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  transition: .4s;
}

Comments

[kumalike]

ありがとうございました！解決できましたm(_ _)m

[kumalike]

あの、スマートフォンの画面サイズに合わせてページを表示にしようとすると、ボタンサイズが変わらないです。どうしたらいいでしょうか？

[hatena19]

回答のCSSに max-width: 100%; を追加すればいいでしょう。
100%だと画面幅一杯になりますので、余白が欲しいときはすこし小さくして調整してください。

[kumalike]

ありがとうございました！大変勉強になりましたm(_ _)m