大きなフォントの素晴らしいアイコンでテキストを垂直方向に中央揃えする方法は？

font-awesomeアイコンとテキストを備えたブートストラップボタンがあるとします。

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

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

編集： 私は可能な解決策を持っています：http：//jsfiddle.net/CLdeG/1/しかしそれは少しハックに感じます-追加のpタグを導入し、pull-leftとdisplay：tableを使用します。多分誰かがより簡単な方法を提案することができます。

私は自分でこれをしなければならなかった、あなたは逆にそれをする必要がある。

• テキストの垂直方向の配置で遊んではいけません
• font-awesomeアイコンの垂直方向の配置を試します

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

もちろん、インラインスタイルを使用して独自のCSSクラスでターゲットにすることはできません。しかし、これはコピーペースト方式で機能します。

ここを参照してください： ボタンのテキストとアイコンの垂直方向の配置

しかしそれが私次第であるなら、私はicon-2xを使用しません。次のように、自分でフォントサイズを指定するだけです

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

実際の例については、JsFiddleを参照してください

私は99％の時間、テキストの横にあるアイコンを使用するため、グローバルに変更を加えました。

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

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

提案されたすべてのオプションを検討した後、最もクリーンなソリューションは、すべての行の高さと垂直方向の配置を設定することです。

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;
}

line-height: inherit;整列していない場合は、配置の問題がある特定のi.fa要素の単純なvia CSSを使用するだけで十分に対処できます。

グローバルソリューションを適切に使用することもできます。これは、CSSの特異性が少し高いため、プロパティline-height: 1を必要とせずに指定するFontAwesomeの.faルールをオーバーライド!importantします。

i.fa {
  line-height: inherit;
}

上記のグローバルソリューションがFontAwesomeアイコンを使用する可能性のある場所で他の問題を引き起こさないことを確認してください。

flexboxオプション-フォント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/

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

i.fa {
    vertical-align: middle;
}

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

i.fa {
  line-height: 100%;
}

アイコンを次のように設定してみてください height: 100%

ラッパー（ボタンなど）を使用して何もする必要はありません。

これにはFont Awesome 5が必要です。それが古いFAバージョンで機能するかどうかは不明です。

.wrap svg {
    height: 100%;
}

アイコンは実際にはsvgグラフィックであることに注意してください。

デモ

Bootstrap 4を使用する人にとっては簡単です：

<span class="align-middle"><i class="fas fa-camera"></i></span>

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

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

個別にターゲティングできるように、テキストをaで囲みます。これで、左と左の両方にフロートする場合、line-heightを使用しての垂直間隔を制御できます。（30px）と同じ高さに設定すると、中央揃えになります。見るください。

新しいマークアップ：

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

新しいCSS：

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

フレックスボックスを使用する場合、テキストの横にあるフォントの素晴らしいアイコンの垂直方向の配置は非常に難しい場合があります。マージンとパディングを試しましたが、すべてのアイテムが移動しました。センター、スタート、ベースラインなどのさまざまなフレックスアライメントを試してみましたが、役に立ちませんでした。アイコンのみを調整する最も簡単でクリーンな方法position: relative; top: XX;は、divを含むものをこれに設定することでした。

さて、この質問は何年も前に尋ねられました。テクノロジーはかなり変更されており、ブラウザーの互換性ははるかに優れていると思います。vertical-alignを使用することもできますが、拡張性が低く、再利用性が低いものもあると思います。フレックスボックスのアプローチをお勧めします。

これは、元のポスターが使用したのと同じ例ですが、フレックスボックスを使用しています。単一の要素をスタイルします。何らかの理由でボタンのサイズが変更された場合、ボタンは引き続き垂直方向および水平方向の中央に配置されます。

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

例： JsFiddle

vertical-alignアイコン要素のプロパティを定義するだけです。

div .icon {
   vertical-align: middle;
}