Help us understand the problem. What is going on with this article?

上下中央揃えの方法(Bootstrap FontAwesome)

More than 1 year has passed since last update.

FontAwesomeのアイコンとテキストを表示させた時に
テキストがアイコンの真ん中に表示されずに困ったので解決方法をメモします。

結論としてはFontAwesomeアイコンのCSSと
テキストのCSSに

display: table-cell; vertical-align: middle;

を加えれば良い。

詳細はこちらに書いてある。
http://unitopi.com/css-vertical-align/

つまり、vertical-align はブロック要素には無効なので
明示的に対象の要素がテーブル要素である事を示さなければならないとの事です。

参考までに・・・

<div class="col">
  {% if user.is_authenticated == False %}
      <a href="#" class ="grid_atag" style = "border-spacing: 10px 5px">
          <i class="fa fa-sign-in fa-2x mr-2" style = "display: table-cell; vertical-align: middle; border-spacing: 3px 0;"></i>
             <div class = "ml-2" style = "display: table-cell; vertical-align: middle;">サインアップ</div>
      </a>
  {% endif %}
</div>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away