Я использую Google Chrome Inspector, и если вы выберете псевдо-глификон, вы увидите, что справа находится пустое пространство. Как я могу центрировать глификон?
Я попытался установить выравнивание текста, но он не работает.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
Обновлена ссылка jsFiddle 2
Я дал letter spacing для псевдоэлемента, и он сделал трюк. Я попытался изменить font-size, и я вижу, что пробел не появляется.
.glyphicon:before{
letter-spacing: -0.085em;
}
Рабочая скрипка: http://jsfiddle.net/MasoomS/1z79r22y/
Я считаю, что проблема root здесь связана с SVG, из которой был создан шрифт значка. Я уже писал иконки с SVG и видел это одно и то же поведение. Если символ не был центрирован в пределах SVG viewbox, вы получили бы глиф, который был вне центра, как вы видели.
Разработка решения на основе кода получило бы супер беспорядочный характер, потому что вам пришлось бы индивидуально учитывать каждый глиф, который не центрирован, а затем ваши смещения должны быть относительно размера значка, чтобы шкала смещений с иконкой font-size. Это, безусловно, способно, но похоже, что это будет головная боль для поддержания.
Я бы порекомендовал одно из следующих:
Алмис Привет. Ваш демо-код использует только только 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.
Просто добавьте класс my-style-icon к значку и добавьте его в свой CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
vertical-align: middle; margin: 0 auto; должен сделать трюк для вас.
Привет Алмис.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Просто замените класс .glyphicon на код css.
Наслаждайтесь..
Как вы видите, его проблема явно связана с добавлением некоторого пробела, единственное, для чего нужно исправить это, установив ширину вручную.
Вы можете избавиться от пустого пространства справа от глифа, играя с атрибутом letter-spacing:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
Обычно я использую max-width (и ширину, если хочу, чтобы все значки в списке имели одинаковый размер) для решения таких проблем.
В соответствии с вашим jsFiddle:
max-width:222px;
Смотрите здесь.
Причина, по которой это не может быть исправлено каким-либо другим способом, кроме взлома, заключается в том, что сам глификон не центрирован внутри собственного контейнера, то есть когда он был сконструирован в этой матрице, он не был полностью центрирован.
Вам придется "взломать" его с помощью приведенных выше разрезов (расстояние между буквами, отрицательный запас и т.д.), но это зависит от разрешения.
Однако, чтобы ВЕРТИКАЛЬНО центрировать его, вы можете удалить прокладку и использовать высоту линии, равную высоте вашего контейнера
Используйте шрифт-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;
}