web-dev-qa-db-ja.com

Font Awesomeアイコンを水平方向に中央揃えするには？

Font Awesome アイコンのあるテーブルがあり、テキストを左揃えにし、アイコンを中央揃えにします。 <i>をセンタリングしてみましたが、動作しません：

HTML：

<td><i class="icon-ok"></i></td>

CSS：

td, th {
    text-align: left;
}
td i {
    text-align:center;
}

jsFiddle

text-align:center !important;を設定しようとしましたが、動作しません。私は何を間違えましたか？

csscss3font-awesome
53
Mustapha Aoussar

フォントの素晴らしいスタイルの独自のフレーバーを追加

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 100%;
}

あなたと一緒に

td i {
    text-align:center;
}

アイコンだけを中央に配置する必要があります。

78
andyb

アイコンのブロックコンテナ（text-align: center;）で <td> を使用します-テキストの配置はインライン要素には適用されず、ブロックコンテナのみに適用されます。

td {
    text-align: center;
}

http://jsfiddle.net/kB6Ju/2/

21
Adrift

アイコンを含むセルにクラスを与えます

<td class="icon"><i class="icon-ok"></i></td>

その後

.icon{
    text-align: center;
}
7
nilobarp

アイコンを含むセルにクラスを追加したくないので、これはどうですか...

各非アイコンtdの内容をspanにラップします。

<td><span>consectetur</span></td>
<td><span>adipiscing</span></td>
<td><span>elit</span></td>

そして、このCSSを使用します。

td {
    text-align: center;
}
td span {
    text-align: left;
    display: block;
}

私は通常、このような状況では回答を投稿しませんが、コメントするには長すぎます。

3
thirtydot

アイコンがアイコンスタックにある場合は、次のコードを使用できます。

.icon-stack{ margin: auto; display: block; }
3
Coded Container

OPを使用すると、属性セレクターを使用して、必要な結果を取得できます。追加するコードは次のとおりです

tr td i[class*="icon"] {
    display: block;
    height: 100%;
    width: 100%;
    margin: auto;
}

以下が更新されたjsFiddleです http://jsfiddle.net/kB6Ju/5/

3
user2578173

私はこれで私の問題を解決しました：

<div class="d-flex justify-content-center"></div>

フォント素晴らしいアイコンでbootstrapを使用しています。

さらにアクセスしたい場合は、以下のリンクを参照してください。 https://getbootstrap.com/docs/4.0/utilities/flex/

2
Everton Buzzi