web-dev-qa-db-ja.com

アイコンフォントでテキストを垂直に整列させる方法は？

私は、プレーンテキストとアイコンフォントを組み合わせた非常に基本的なHTMLを持っています。

<div class="ui menu">
    <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
    <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
    <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>

問題は、アイコン テキストと同じ高さで正確にレンダリングされない ：

enter image description here

それを修正するための提案はありますか？

htmlcssfontsfont-awesome
51
Fractaliste

vertical-align:middleをspan要素に追加できます。

ここに更新された例

.nav-text {
    vertical-align:middle;
}
50
Josh Crozier

すでにいくつかの回答がありますが、flexboxが最もクリーンで「ハッキングの少ない」ソリューションであることがわかりました。

parent-element {
  display: flex;
  align-items: center;
}

Safari <8、Firefox <21およびInternet Explorer <10（IE8 + 9をサポートするには this polyfill を使用）をサポートするには、ベンダープレフィックスが必要です。

parent-element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
34
sam

vertical-alignは単位値を取ることができるため、必要なときに単位値に頼ることができます。

{
  display:inline-block;
  vertical-align: 5px;
}

{
  display:inline-block;
  vertical-align: -5px;
}
19
getsetbro

これをCSSに追加します。

.menu i.large.icon,
.menu i.large.basic.icon {
    vertical-align:baseline;
}

DEMO

5
Arbel

line-heightを画像の垂直サイズに設定してから、ジョシュが言ったようにvertical-align:middleを実行します。

画像が20pxの場合、

{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
3
Marian Udrea

垂直方向および水平方向に中央揃えするには、次を使用します。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
3
Alberto Lozano

スパンに追加する

vertical-align:baseline;

うまくいかなかったが

vertical-align:baseline;
vertical-align:-webkit-baseline-middle;

動作しました（Chromeでテスト済み）

0
Tomer Almog

次のプロパティを使用できます：vertical-align:middle;

.selector-class { 
    float:left;
    vertical-align:middle; 
}
0
kishan Radadiya