html - CSS - テキストをアイコンに中央揃え

Question

CSS でマテリアル アイコンを使用して、アイコンとテキストを含むリンクをレンダリングする次のコードがあります。

<a href="#"><i class="material-icons">group_work</i>Groups</a>

下の画像でわかるように、テキストが沈んでいるように見えます.それらを垂直に中央揃えにしたいと思います. どうすればこれを達成できますか?

PS。（デザイナーではありません！）

Answer 1

vertical-algin: middle;要素を垂直方向に中央揃えするには、ルールを使用できます。あなたの場合、それはおそらく次のようになります。

.material-icons {
  vertical-align: middle;
}

ダークボタンの例を次に示します。

.material-icons {
  vertical-align: middle;
  margin-right: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<a href="#" class="grey darken-3 btn"><i class="material-icons">group_work</i>Groups</a>

Answer 2

vertical-align:middle applied to the iconi` は最も単純なオプションですが、結果に一貫性がない場合があります。

リンクを に設定するとより良い結果が得られましたdisplay:inline-flexが、違いは非常に微妙です。

vertical-alignサポートされていないブラウザのフォールバックとして引き続き使用できます。

a {
  margin: 1em;
  display: inline-block;
}
a i {
  vertical-align: middle;
}
a.flex {
  display: inline-flex;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<a href="#" class=""><i class="material-icons">group_work</i>Groups</a>
<br/>
<a href="#" class="flex"><i class="material-icons">group_work</i>Groups</a>