web-dev-qa-db-ja.com

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

私は、フォントの素晴らしいアイコンといくつかのテキストを含むブートストラップボタンがあるとしましょう。

<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を使います。誰かがもっと簡単な方法を提案できます。

htmlcsshtml5css3font-awesome
211
Paul

すべての提案されたオプションを考慮した後、最もきれいな解決策は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;
}
35
Paul

私はこれを自分でやらなければなりませんでした、あなたはそれを逆にする必要があります。

  • テキストの垂直方向の配置では再生されません。
  • フォント素晴らしいアイコンの垂直方向の配置で遊ぶ
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

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

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

それは私に任されていた場合しかし、私はアイコン2倍を使用しないでしょう。そして、次のように単純に自分自身でフォントサイズを指定してください。

<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 を参照してください。

273
andxyz

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

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

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

44
Rush Frisby

問題が並んでいないのであれば、整列の問題を抱えている特定のi.fa要素に対してCSSを介した単純なline-height: inherit;を使えば十分に簡単にできます。

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

i.fa {
  line-height: inherit;
}

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

21
purefusion

フレックスボックスオプション - 素晴らしいフォント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/

フレックスとフォントを使って素晴らしい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/

12
Hastig Zusammenstellen

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

i.fa {
    vertical-align: middle;
}
11
ajaali

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

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

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

あなたはラッパーを使って何もする必要はありません（例えばあなたのボタン）。

これにはFont Awesome 5が必要です。それが古いFAバージョンで動作するかどうかはわかりません。

.wrap svg {
    height: 100%;
}

アイコンは実際にはsvgグラフィックです。

デモ

2
mriiiron

テキストをで囲むと、個別にターゲットを設定できます。左右にフロートすると、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;
}
1
Webster Gordon

アイコンの行の高さを微調整するもう1つの方法は、vertical-alignプロパティの割合を使用することです。通常、0％が一番下、100％が一番上ですが、面白い効果を得るために負の値または100以上の値を使用することもできます。

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

Bootstrap 4を使用する場合は簡単です：

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

フレックスボックスを使用している場合、テキストの横にあるフォント素晴らしいアイコンの垂直方向の配置は非常に困難です。余白とパディングを試しましたが、それですべての項目が移動しました。私は役に立ちませんでしたが、center、start、baselineなどのさまざまなフレックスアラインメントを試してみました。アイコンだけを調整する最も簡単でわかりやすい方法は、divを含むコードをposition: relative; top: XX;に設定することです。これで、仕事は完全に終了しました。

0
ADP