Допустим, у меня есть кнопка начальной загрузки со значком шрифта и текстом:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
Как сделать так, чтобы текст отображался по центру? Текст теперь выровнен по нижнему краю иконки: http://jsfiddle.net/V7DLm/1/
РЕДАКТИРОВАТЬ: У меня есть возможное решение : http://jsfiddle.net/CLdeG/1/, но это немного странно - вводит дополнительный тег p, использует pull-left и display: table. Может быть, кто-то может предложить более простой способ.
html
css
font-awesome
Павел
источник
источник
Ответы:
Я просто должен был сделать это сам, тебе нужно сделать это наоборот.
Конечно, вы не можете использовать встроенные стили и нацеливать их на свой собственный класс CSS. Но это работает в режиме копирования-вставки.
Смотрите здесь: Вертикальное выравнивание текста и значка в кнопке
Однако, если бы это зависело от меня, я бы не использовал icon-2x. И просто укажите размер шрифта сам, как в следующем
рабочий пример смотрите в JsFiddle
источник
Я использую значки рядом с текстом в 99% случаев, поэтому я сделал изменение глобально:
Добавьте 3x, 4x и т. Д. К тому же определению, которое необходимо.
источник
vertical-align: middle;
- я мог бы что-то упустить здесь. Пожалуйста, объясните, если так.vertical-align: middle
, они имеют в виду, что вы используетеblock
элементы . Если вы используетеinline
,inline-block
илиtable-cell
, вы должны быть хорошими. МДН:vertical-align
После рассмотрения всех предложенных вариантов самое чистое решение - установить высоту строки и выровнять все по вертикали:
Посмотреть демо Jsfiddle
CSS:
источник
если что-то не
line-height: inherit;
совпадает , простое использование CSS для определенных элементов i.fa, имеющих проблемы с выравниванием, может сделать это достаточно просто.Вы также можете реально использовать глобальное решение, которое из-за немного более высокой специфичности CSS переопределит правило .fa FontAwesome, которое задает свойство
line-height: 1
без необходимости!important
:Просто убедитесь, что указанное глобальное решение не вызывает других проблем в тех местах, где вы также можете использовать значки FontAwesome.
источник
опция flexbox - шрифт 4,7 и ниже
Размещенный URL-адрес FA 4.x - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
играть на скрипке
http://jsfiddle.net/Hastig/V7DLm/180/
используя flex и font 5
URL-адрес FA 5.x - https://use.fontawesome.com/releases/v5.0.8/js/all.js
играть на скрипке
https://jsfiddle.net/3bpjvof2/
источник
Самый простой способ - установить свойство css для вертикального выравнивания на середину.
источник
.svg-inline--fa
для FontAwesome 5fa-clock
в классе?Это хорошо сработало для меня.
источник
Попробуйте установить значок как
height: 100%
Вам не нужно ничего делать с оберткой (скажем, с вашей кнопкой).
Это требует Font Awesome 5. Не уверен, работает ли он для более старых версий FA.
Обратите внимание, что значок на самом деле является
svg
графическим.демонстрация
источник
Для тех, кто использует Bootstrap 4, это просто:
источник
Другой вариант точной настройки высоты линии значка - использование процента от
vertical-align
свойства. Обычно 0% внизу и 100% вверху, но можно использовать отрицательные значения или более сотни для создания интересных эффектов.источник
Я бы обернул текст так, чтобы вы могли выбрать его отдельно. Теперь, если вы плаваете влево и вправо, вы можете использовать высоту строки для управления вертикальным интервалом. Установка его на ту же высоту, что и (30px), выровняет его по центру. Смотрите здесь .
Новая разметка:
Новый CSS:
источник
vertical-align: middle
на значок и текст. Таким образом, вы не будете делать предположения о высоте иконки, и CSS будет меньше.При использовании flexbox вертикальное выравнивание шрифтов рядом с текстом может быть очень сложным. Я попробовал поля и отступы, но это переместило все элементы. Я пробовал разные изгибы, такие как центр, начало, базовая линия и т. Д., Но безрезультатно. Самый простой и чистый способ настроить только значок - установить для него значение div.
position: relative; top: XX;
Это отлично сработало.источник
Ну, этот вопрос был задан несколько лет назад. Я думаю, что технологии немного изменились, и совместимость с браузерами стала намного лучше. Вы можете использовать вертикальное выравнивание, но я бы посчитал, что кое-что менее масштабируемо и менее многократно. Я бы порекомендовал flexbox подход .
Вот тот же пример, который использовался в оригинальном постере, но с flexbox. Стилизует отдельный элемент. Если размер кнопки изменяется по какой-либо причине, он будет продолжать центрироваться по вертикали и горизонтали.
Пример: JsFiddle
источник
Просто определите
vertical-align
свойство для элемента icon:источник