cssを適用した時にアイコンの位置がズレてしまうのを解決したいです。

Question

前提・実現したいこと

Twitterのアイコンと同じ様に、インスタグラムのアイコンを上下中央に配置したいです。
解決方法をご教示して頂けましたら幸いです。よろしくお願い申し上げます。

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

cssを適用していない時は、Twitterアイコンと同じ様に、インスタグラムのアイコンも上下中央揃っているのですが、cssでインスタグラムのアイコンを装飾すると位置が若干上にズレてしまい、上下中央揃えではなくってしまいます。

該当のソースコード

   <div class="row"><!--  SNSコンテナ -->
        <div class="card col-10 col-md-8 h-25">
            <div class="card-body text-center">
                <a href=""><i class="fab fa-twitter-square fa-3x my-example fa-fw"></i></a>
                <a href="" class="insta_btn">
                    <span class="insta">
                        <i class="fab fa-instagram fa-3x my-example fa-fw"></i>
                    </span>
                </a>
            </div>
        </div>
    </div><!--  SNSコンテナ終了 -->

.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 17px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
  margin-top: -6pt;
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 40px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}

試したこと

html上でbootstrapの位置ユーティリティなどを適用したのですが、上手く効きませんでした。
また、cssのアイコン背景のposition: relative;部分が問題かと思いabsoluteや他のものを試したのですが、大きくズレてしまい上手く配置出来ませんでした。

Answer 1

card-bodyに対して

.card-body {
  display: flex;
  align-items: center;
}

を適応してみては？

Comments

[nre]

大変お忙しい中、ご回答して頂き誠にありがとうございます。
お教え頂きましたコードを適用したところ、アイコン2つとも左に寄り、インスタグラムアイコンは上にズレたままでした。左寄りは「justify-content: center;」を記載して中央揃えにし解決出来ましたが、以前インスタアイコンは上にズレたままでした。
「d-flex align-items-end」はhtml上に記載し効果はあったのですが、これだと逆に下にズレてしまいました。

[Nero1129]

真ん中に配置したいのであれば、同じくflexboxのプロパティである
`justify-content: center`を使えばいいと思いますよ。ピュアで書いてるので、スペルミスしていたらすみません。

[nre]

先程、justify-content: center;試して見たのですが、中央寄りには成るものの上下のズレが修正出来ませんでした。
いえいえ、ご丁寧にお教え頂き誠にありがとうございます！

[Nero1129]

すみません。仕事中だったので適当に答えてしまいました。
Bootstrapで先に、クラスを書いてしまっているので、上書きできない状態です。
https://getbootstrap.jp/docs/4.2/utilities/flex/
普段、ほとんどBootstrapは使わないので、わかりませんが、僕が答えたプロパティがここに乗っているので、該当するクラスを記述すれば、表現したいものが作れると思います。

[Lhankor_Mhy]

横からすみません。

すでに自己解決されているようですが、Nero1129さんのご回答をBootstrapに落とし込んだサンプルを提示します。

https://jsfiddle.net/Lhankor_Mhy/2rcvbjwo/

残っている上下のズレの原因は、
・margin-top: -6pt
・display: inline-block
でしたので、打ち消しました。

[Nero1129]

Lhankor_Mhyさん、ナイスでーす

Answer 2

.fa-twitter-square{
position: relative;
top: 10px;
}

アイコンを指定して
ポジションを変更する事で無事にインスタグラムアイコンとのズレなく表示させる事が出来ました。
ただ、アイコン2つが表示されると上下揃うのですが、どちらか一つが表示された場合に中心からズレてしまうので、
根本的な解決は出来ず、今回の実装は断念いたしました。
ただ、両方のアイコンを揃える場合は上記のコード解決するのでこちらを解決方法といたします。

ご回答してくださった方々ありがとうございました。