CSS - テキストをアイコンで整列する

Question

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

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

下の画像に見られるように、テキストが沈んでいるようです。私はそれらを垂直方向に整列させたいと思います。どうすればこれを達成できますか？

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

Answer 1

要素を垂直方向に中央に配置するには、vertical-algin: middle;ルールを使用できます。あなたのケースでは、それが最もpropably次のようになります。ここでは

.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：真ん中applied to the icon i`が最も簡単なオプションすることができ結果は矛盾する可能性があります。

私はリンクを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>

Answer 3

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<a href="#" class="grey darken-4 btn"><i class="material-icons left">group_work</i>Groups</a>