FontAwesomeとテキストを併用すると上下中央ぞろえにならない

Question

BootstrapとFontAwesomeを用いて
アイコンとテキストを横並びに表示したいのですが
添付の写真のようにテキストが下端によってしまいます。

このHTMLのソースはこちらになります。
どのようにしたらテキストがアイコンの中央に来るように出来るのでしょうか？

よろしくお願いいたします。

<div class="container text-center text-light bg-primary align-items-center" style = "max-width:80%">
        <div class="row align-items-center h5">
          <div class="col">
            <i class="fa fa-sign-in fa-2x ml-1"></i>
            サインアップ
          </div>
          <div class="col">
            ログイン
          </div>
          <div class="col">
            登録
          </div>
        </div>
</div>

画像

Answer 1

<div class="col">

のところを

<div class="col d-flex align-items-center justify-content-center">

とすれば縦横共に中央揃えになると思います。

Answer 2

私の解釈が合ってればvertical-align: middle;だと思います。

Comments

[TakayukiYamada]

ありがとうございます。
つまり、<div class="col">にvertical-align: middle;を適用するという事でしょうか？

[gogojp]

<i class="fa fa-sign-in fa-2x ml-1"></i>に対して適用すればいいと思います。

[退会済みユーザー]

上の方が言っている通りiタグに対してして指定ください