Как центрировать шрифты Awesome по горизонтали?

У меня есть таблица с шрифтом 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;, но не работает. Что я сделал не так?

Ответ 1

Добавьте свой собственный стиль шрифта удивительный стиль

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

который вместе с вашим

td i {
    text-align:center;
}

должен центрировать только значки.

Ответ 2

Используйте text-align: center; в контейнере блока значка (<td>) - text-align не применяется к встроенным элементам, только блокировать контейнеры:

td {
    text-align: center;
}

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

Ответ 3

Дайте класс ячейке, содержащей значок

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

а затем

.icon{
    text-align: center;
}

Ответ 4

Поскольку вы не хотите добавлять класс в ячейки, содержащие значок, как насчет этого...

Оберните содержимое каждой не-значка 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;
}

Обычно я не отправлял ответ в этой ситуации, но это слишком долго для комментария.

Ответ 5

OP вы можете использовать селектор атрибутов, чтобы получить желаемый результат. Вот дополнительный код, который вы добавляете

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

Вот обновленный jsFiddle http://jsfiddle.net/kB6Ju/5/

Ответ 6

Если ваши значки находятся в стеке значков, вы можете использовать следующий код:

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

Ответ 7

я решил свою проблему с этим:

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

Я использую начальную загрузку шрифта с отличными иконками.

если вы хотите узнать больше, перейдите по ссылке ниже: https://getbootstrap.com/docs/4.0/utilities/flex/