(HTML, CSS) Font Awesomeを導入するとアイコンと文字が左上に寄ってしまう

###実現したいこと
CRUDアプリを作成しており、投稿記事にカテゴリータグをつけております。Font Awesomeでタグ画像をつけたところ、元々div中心に表示されていた文字が左上に寄ってしまいます。

Font Awesome導入しても画像や文を中心に置きたく、ご知見頂けますと幸いです。

###該当コード

HTML
1<div class="tag-container">
2　　　　　　　　<div class="tag-design">
3　　　　　　　　　　　　　　　　<i class="fas fa-tags"><a href="{% url 'index' 'all' 'other' %}">その他</a></i>
4    </div>
5　　　　　　　　<div class="tag-design">
6　　　　　　　　　　　　　　　　<a href="{% url 'index' 'bazaar' %}">ワールドバザール</a>
7    </div>
8</div>

CSS
1.tag-container{
2    display: flex;
3    flex-direction: row;
4}
5
6.tag-design{
7    box-sizing: border-box;
8    border: 0.5px solid rgb(223, 223, 223);
9    border-radius: 4px;
10    padding:4px 6px;
11    margin : 0px 10px 0px 0px;
12    display:flex;
13}

###試したこと

tag-designクラスに下記を追加　→ 変化なし

CSS
1  display: table-cell;
2  vertical-align: middle;

下記を追加　→ 変化なし

CSS
1.tag-container{
2    text-align:center;
3}
4
5.tag-design{
6    display:inline-block;
7    text-align:left;
8}

###環境
HTML5
Bootstrap 4.7.0

行動規範の内容に同意します

回答1件

ベストアンサー

下記に変更して試してみてください。

html
1<div class="tag-design">
2  <i class="fas fa-tags"></i><a href="{% url 'index' 'all' 'other' %}">その他</a>
3</div>

</div>

css
1.tag-design{
2   box-sizing: border-box;
3   border: 0.5px solid rgb(223, 223, 223);
4   border-radius: 4px;
5   padding:4px 6px;
6   margin : 0px 10px 0px 0px;
7   display:flex;
8   align-items: center;
9   justify-content: center;
10}