Я использую Google Chrome Inspector, и если вы выберете псевдо псевдосимметричного глификона, вы увидите, что справа находится пустое пространство. Как я могу центрировать глификон?Содержание глификона центра
Я попытался установить выравнивание текста, но он не работает.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
Обновлена ссылка jsFiddle 2
Я дал letter spacing для псевдо-элемента апа d он сделал трюк. Я попытался изменить font-size, и я вижу, что пробел не появляется.
.glyphicon:before{
letter-spacing: -0.085em;
}
Работа скрипка: http://jsfiddle.net/MasoomS/1z79r22y/
это лучший ответ. Я приму это, но буду ждать другого несколько дней, чтобы дать щедрость – Almis
Просто добавьте класс my-style-icon к иконе и добавьте в ваш CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
Пробел находится в центре, но перед псевдо (я должен упомянуть об этом в вопросе) – Almis
Пожалуйста, введите полный код, все, что я вижу в jsfiddle, это значок html и некоторые бесполезные css. – Wazaaaap
Я не делал много, я просто хотел центрировать глификон в коробке, но из-за этого псевдо, прежде чем он не выглядит, что он посередине. Я могу использовать прописку или маржу, чтобы исправить это, но, хотя это может быть лучшее решение. Проверьте обновленную ссылку – Almis
vertical-align: middle; margin: 0 auto; должен сделать трюк для вас.
, не можете ли вы обновить мою jsfiddle? возможно, я делаю что-то неправильно. – Almis
Almis Привет, там. В вашем демо-коде используется только 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.
Привет, ваш пример точно так же, как и мой, если вы возьмете линейку, вы увидите, что ось y точно такая же. Проверьте обновленный jsfiddle, чтобы увидеть, что я имею в виду. – Almis
Привет, извините, я не понял это в первый раз. Ре посмотрел на тебя, новая скрипка, и я вижу, что ты имеешь в виду сейчас. Посмотрите на это [** FIDDLE **] (http://jsfiddle.net/AngularJR/sps01dsd/3/). Существует даже разница между значком плюс и значком минуса.** минус ** выглядит как место слева, а значок ** плюс ** имеет место справа, как вы указали. – AngularJR
Да, я знаю, если мы ничего не можем сделать, автор этого глификона должен исправить это – Almis
Здравствуйте Almis.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Просто замените класс .glyphicon на код css.
Наслаждайтесь ..
Как вы можете видеть его ясно проблему автор, добавив немного белого пространства, только почему исправить это, установив ширину вручную.
Вы можете избавиться от пустого пространства справа от знака, играя с атрибутом letter-spacing:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
Я считаю, что корень проблемы здесь с SVGs, что значок шрифта был построен из. Я уже писал иконки с SVG и видел это одно и то же поведение. Если символ не был центрирован в его SVG viewbox, вы получили бы глиф, который был вне центра, как вы заметили.
Разработка программного обеспечения на основе кода будет очень беспорядочной, потому что вам придется индивидуально учитывать каждый глиф, который не центрирован, а затем ваши смещения должны быть относительно размера значка, поэтому смещения с помощью значка font-size. Это, конечно же, умело, но похоже, что это будет головная боль для поддержания.
Я рекомендовал бы одно из следующих действий:
Я обычно использует максимальную ширину (ширину и, если я хочу, чтобы все иконки в списке, чтобы иметь одинаковый размер), чтобы иметь дело с такими вопросами.
В соответствии с Вашим jsFiddle:
max-width:222px;
См here.
Причина, по которой это не может быть исправлено каким-либо другим способом, кроме взлома, состоит в том, что сам глификон не сосредоточен внутри собственного контейнера, то есть когда он был спроектирован в его матрице, он не был полностью центрирован.
Вам придется «взломать» его с помощью указанных выше шипов (расстояние между буквами, отрицательный запас и т. Д.), Но это зависит от разрешения.
Однако до центра ВЕРТИКАЛЬНО его, вы можете удалить отступы, и использование линии высотой, равной высоте вашего контейнера
Использование шрифта удивительным, это «+» идеально по центру, без проблем кернинга. И используйте display: flex on parent, в сочетании с margin: auto на дочернем элементе (например, значок). Это приводит к идеально выравниванию. Вот jsfiddle (http://jsfiddle.net/Rpad/sps01dsd/13/)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
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;
}
Обновлена ссылка http://jsfiddle.net/sps01dsd/1/ – Almis
Это может быть проблема кернинга в glyphicons шрифта файла, если вы попробуете одиночные символы а-я в в строке вы увидите, что они правильно выровнены по центру. – Luizgrs
@ Luizgrs вы правы, я считаю, что большинство из них верны, но некоторые другие нет, если вы попробуете глификон-минус, это еще хуже. Я думаю, что единственный способ - настроить вручную. Будет ждать лучшего решения. – Almis