web-dev-qa-db-ja.com

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

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

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

下の画像でわかるように、テキストが沈んでいるように見えます。垂直方向に中央に揃えてください。どうすればこれを達成できますか？

Icon and Text mis-aliged

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

htmlcssiconsvertical-alignmentgoogle-material-icons
6
Vijay Chavda

要素を垂直方向に中央揃えするには、 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>
14
andreas
<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>
2
Sagar Pednekar

vertical-align：middleapplied 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>
1
Paulie_D
a {
  display: inline-flex;
  align-items: center;
}

トリックを行います;）

0
eyettea