Bootstrap アイコンの中央揃えができない

Question

前提・実現したいこと

こんにちは。
アイコンを中心にしたいですが反映されず困っています。

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

スクショです。アイコンを中心にしたいですがスクショのように左揃えになり反映されません。

該当のソースコード

welcome.blade.php
<footer class="row no-gutters">
        <div class="card mt-5 mx-auto  col-md-9 col-md-offset-3">
          <div class="h2 card-header text-center back-color-gradient">
            <section id="contact">お問い合わせ</section>
          </div>
          <div class="card-body text-center">
              <h4>メールまたはツイッターDMでご連絡ください。</h4>
          </div>
          <ul class="list-inline mb-5 d-flex ">
            <li>
              <a href="#">
                <div class="navbar-brand-gmail"></div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="navbar-brand-twitter d-block m-auto"></div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="navbar-brand-github"></div>
              </a>
            </li>
          </ul>
        </div>
      </footer>

/* お問い合わせ CSS */
.navbar-brand-gmail {
  background: url("../images/gmail--v2.png") no-repeat left center;
  background-size: contain;
  height: 50px;
  width: 250px;
}
.navbar-brand-twitter {
  background: url("../images/2021 Twitter logo - blue.png") no-repeat left center;
  background-size: contain;
  height: 50px;
  width: 250px;
}
.navbar-brand-github {
  background: url("../images/github.png") no-repeat left center;
  background-size: contain;
  height: 50px;
  width: 250px;
}

試したこと

div class="navbar-brand-gmail"
こちらにブロック要素を中心とするmx-autoを入れました。これでも反映されず。
ul classこちらにもmx-autoを入れましたが反映されず。
親子関係が間違っているのでしょうか?

補足情報（FW/ツールのバージョンなど）

bootstrap 4
laravel 6.20

Answer 1

d-flexで CSS FlexBox による横並びにしているので、justify-content-center で中央寄せします。

    <ul class="list-inline mb-5 d-flex justify-content-center">

Justify content

あと、背景画像の中央寄せは、no-repeat left center としているところを no-repeat center center
に修正します。

.navbar-brand-gmail {
  background: url("../images/gmail--v2.png") no-repeat center center;
  background-size: contain;
  height: 50px;
  width: 250px;
}

twitter と github の画像も同様です。

---

以下はアドバイスですので、よかったご参考に。

width: 250px;で幅固定にしてますが、これだと画面幅を縮めたときにはみ出てしまいます。
それを考慮するなら、 アイコン画像のブロック幅はアイコン幅にしておいて(正方形？)、justify-content-aroundで余白を均等に割り当てるのがバランスがいいと思います。

<ul class="list-inline mb-5 d-flex justify-content-around">

.navbar-brand-gmail {
  background: url("../images/gmail--v2.png") no-repeat center center;
  background-size: contain;
  height: 50px;
  width: 50px;
}

Comments

[Tony-Aaron]

ご回答kありがとうございます!!返信が遅くなり申し訳ありません。
justify-contentで中央揃えにして更に backgroundの画像がleftになっていた為、中央揃えにcenterで調整したということになりますね。