上下中央揃えの方法（Bootstrap FontAwesome）

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>