Содержание центра глификона

Ответ 1

Я дал letter spacing для псевдоэлемента, и он сделал трюк. Я попытался изменить font-size, и я вижу, что пробел не появляется.

.glyphicon:before{
   letter-spacing: -0.085em;
 }

Рабочая скрипка: http://jsfiddle.net/MasoomS/1z79r22y/

Ответ 2

Я считаю, что проблема root здесь связана с SVG, из которой был создан шрифт значка. Я уже писал иконки с SVG и видел это одно и то же поведение. Если символ не был центрирован в пределах SVG viewbox, вы получили бы глиф, который был вне центра, как вы видели.

Разработка решения на основе кода получило бы супер беспорядочный характер, потому что вам пришлось бы индивидуально учитывать каждый глиф, который не центрирован, а затем ваши смещения должны быть относительно размера значка, чтобы шкала смещений с иконкой font-size. Это, безусловно, способно, но похоже, что это будет головная боль для поддержания.

Я бы порекомендовал одно из следующих:

• Примите набор глификон для того, что это (свободный значок), и живите с его несовершенствами
• Ищите другой значок, который не имеет этой же проблемы - будьте готовы заплатить за лицензию
• Создайте собственный шрифт значка, чтобы вы могли центрировать все глифы.

Ответ 3

Алмис Привет. Ваш демо-код использует только только span, удерживая глификон, у которого нет Ширина, чтобы центрировать внутри.

Как только вы сделаете что-то подобное, оно будет сосредоточено.

<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>

Вот Fiddle.

Ответ 4

Просто добавьте класс my-style-icon к значку и добавьте его в свой CSS:

.my-style-icon {
    font-size: 120px;
    display: block;
    text-align:center;
}

Ответ 5

vertical-align: middle; margin: 0 auto; должен сделать трюк для вас.

Ответ 6

Привет Алмис.

.glyphicon {
      font-size: 120px;
      display: block;
      text-align: center;
    }

Просто замените класс .glyphicon на код css.

Наслаждайтесь..

Ответ 7

Как вы видите, его проблема явно связана с добавлением некоторого пробела, единственное, для чего нужно исправить это, установив ширину вручную.

Ответ 8

Вы можете избавиться от пустого пространства справа от глифа, играя с атрибутом letter-spacing:

.glyphicon {
    font-size: 120px;
    letter-spacing: -9px;
}

Ответ 9

Обычно я использую max-width (и ширину, если хочу, чтобы все значки в списке имели одинаковый размер) для решения таких проблем.

В соответствии с вашим jsFiddle:

max-width:222px;

Смотрите здесь.

Ответ 10

Причина, по которой это не может быть исправлено каким-либо другим способом, кроме взлома, заключается в том, что сам глификон не центрирован внутри собственного контейнера, то есть когда он был сконструирован в этой матрице, он не был полностью центрирован.

Вам придется "взломать" его с помощью приведенных выше разрезов (расстояние между буквами, отрицательный запас и т.д.), но это зависит от разрешения.

Однако, чтобы ВЕРТИКАЛЬНО центрировать его, вы можете удалить прокладку и использовать высоту линии, равную высоте вашего контейнера

Ответ 11

Используйте шрифт-awesome, он '+' идеально по центру, без проблем кернинга. И используйте display: flex on parent, в сочетании с margin: auto на дочернем элементе (например, значок). Это приводит к идеально выравниванию. Вот jsfiddle (http://jsfiddle.net/Rpad/sps01dsd/13/)

<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'; return false;">

HTML:
<div class="container">
    <div class="row">
        <div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
            <i class="fa fa-plus"></i>
        </div>
    </div>
</div>
CSS:
.fa-plus {
    margin: auto;
    font-size: 10em;
}
#add {
    border: 5px dashed black;
    border-radius: 25px;
    display: flex;
}