1. ホーム
  2. ハイパーリンク

[解決済み】大きなフォントアウターアイコンでテキストを縦方向にセンタリングする方法は?

2022-04-04 08:07:59

質問

例えば、font-awesomeアイコンといくつかのテキストを含むbootstrapボタンがあるとします。

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

テキストを垂直方向に中央揃えで表示するには? 現在、テキストはアイコンの下辺に配置されています。 http://jsfiddle.net/V7DLm/1/

解決方法は?

すべての提案されたオプションを考慮した後、最もきれいな解決策は、line-heightとvertical-alignをすべて設定することであると思われます。

参照 Jsfiddleデモ

CSSです。

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}