262

font-awesome アイコンといくつかのテキストを含むブートストラップ ボタンがあるとします。

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

テキストを垂直方向の中央揃えにするにはどうすればよいですか? テキストはアイコンの下端に揃えられるようになりました: http://jsfiddle.net/V7DLm/1/

4

15 に答える 15

57

私は 99% の確率でテキストの横にアイコンを使用しているので、グローバルに変更を加えました。

.fa-2x {
  vertical-align: middle;
}

必要に応じて、同じ定義に 3x、4x などを追加します。

于 2015-04-01T13:53:23.540 に答える
41

提案されたすべてのオプションを検討した後、最もクリーンな解決策は、すべてを 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;
}
于 2013-09-03T01:32:16.977 に答える
27

if things aren't lining up, a simple line-height: inherit; via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.

You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1 without requiring !important on the property:

i.fa {
  line-height: inherit;
}

Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.

于 2014-03-17T14:28:33.257 に答える
20

flexbox オプション - font awesome 4.7 以下

FA 4.x ホスト URL - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

フィドル

http://jsfiddle.net/Hastig/V7DLm/180/

Flex と Font Awesome 5 の使用

FA 5.x ホスト URL - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

フィドル

https://jsfiddle.net/3bpjvof2/

于 2016-08-26T08:10:28.090 に答える
12

最も簡単な方法は、vertical-align css プロパティを middle に設定することです

i.fa {
    vertical-align: middle;
}
于 2017-10-08T19:52:12.880 に答える
6

これは私にとってはうまくいきました。

i.fa {
  line-height: 100%;
}
于 2016-11-03T06:44:14.260 に答える
2

アイコンの行の高さを微調整する別のオプションは、vertical-alignプロパティのパーセンテージを使用することです。通常、0% が下で、100% が上ですが、興味深い効果を作成するために、負の値または 100 を超える値を使用できます。

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}
于 2017-08-09T22:22:27.653 に答える
0

私にとっては、要素を表示するグリッドを作成し、コンテンツを整列させるだけで完全に機能します。単に解決策。

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}
于 2021-12-03T08:49:50.723 に答える