Как отцентрировать текст по вертикали с помощью значка с большим шрифтом?


231

Допустим, у меня есть кнопка начальной загрузки со значком шрифта и текстом:

<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. Может быть, кто-то может предложить более простой способ.


2
Ты бог. Серьезно, я потратил 2 часа на это сегодня, ваше решение было НАИБОЛЕЕ чистейшим. Не нужно ничего жестко кодировать.
Чак

этот подход легче
Равин Бимсингх

Ответы:


304

Я просто должен был сделать это сам, тебе нужно сделать это наоборот.

  • не играйте с вертикальным выравниванием текста
  • играть с вертикальным выравниванием шрифта-удивительный значок
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Конечно, вы не можете использовать встроенные стили и нацеливать их на свой собственный класс CSS. Но это работает в режиме копирования-вставки.

Смотрите здесь: Вертикальное выравнивание текста и значка в кнопке

Однако, если бы это зависело от меня, я бы не использовал icon-2x. И просто укажите размер шрифта сам, как в следующем

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

рабочий пример смотрите в JsFiddle


1
да, это лучшее решение, спасибо. По-прежнему, кажется, требуется высота строки, хотя jsfiddle.net/paulftw/F3KyK/41
Пол

1
Я обновил ваш jsfiddle, чтобы узнать, как я это сделаю. Я использовал размер шрифта для значка вместо 2x. jsfiddle.net/3GMjp/1
andxyz

В вашем первом фрагменте кода начальный тег <span> не соответствует конечному тегу </ i>.
Джазарук

Не работает с некоторыми значками. Пример fa-angle-left
стейкчезер

Важно понимать, что включая потрясающие JS-файлы также можно изменить внешний вид. Моя иконка была слишком далеко вверх, я удалил включение js, чтобы увидеть, что произойдет, и теперь он слишком далеко внизу.
lucidbrot

53

Я использую значки рядом с текстом в 99% случаев, поэтому я сделал изменение глобально:

.fa-2x {
  vertical-align: middle;
}

Добавьте 3x, 4x и т. Д. К тому же определению, которое необходимо.


7
На мой взгляд, это должен быть принятый ответ, так как это, безусловно, самое простое решение, если я не пропущу что-то в исходном вопросе. Спасибо @rushonerok! Я не уверен, почему некоторые люди говорят, чтобы не использовать vertical-align: middle;- я мог бы что-то упустить здесь. Пожалуйста, объясните, если так.
Кендалл

1
@ Кендалл Рот: Думаю, когда люди говорят, что не используют vertical-align: middle, они имеют в виду, что вы используете blockэлементы . Если вы используете inline, inline-blockили table-cell, вы должны быть хорошими. МДН:vertical-align
Риного

Работает как шарм! Спасибо: D
Мухаммед А. Фадил

37

После рассмотрения всех предложенных вариантов самое чистое решение - установить высоту строки и выровнять все по вертикали:

Посмотреть демо Jsfiddle

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

2
Что если ваш контейнер больше 50 пикселей? Тогда это не сработает ... У меня есть контент, который меняет размер, и он должен иметь значок по центру внутри ... Есть идеи по этому поводу?
Slaven Tomac

24

если что-то не line-height: inherit;совпадает , простое использование CSS для определенных элементов i.fa, имеющих проблемы с выравниванием, может сделать это достаточно просто.

Вы также можете реально использовать глобальное решение, которое из-за немного более высокой специфичности CSS переопределит правило .fa FontAwesome, которое задает свойство line-height: 1без необходимости !important:

i.fa {
  line-height: inherit;
}

Просто убедитесь, что указанное глобальное решение не вызывает других проблем в тех местах, где вы также можете использовать значки FontAwesome.


16

опция flexbox - шрифт 4,7 и ниже

Размещенный URL-адрес FA 4.x - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

играть на скрипке

http://jsfiddle.net/Hastig/V7DLm/180/


используя flex и font 5

URL-адрес FA 5.x - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

играть на скрипке

https://jsfiddle.net/3bpjvof2/


1
Это может центрировать иконку вертикально внутри div, а не только внутри строки текста. Прекрасно работает!
Шон Боб

@ whomever продолжает пытаться редактировать это - это, как правило, мой стиль макета для ответов. Я считаю, что это делает его более читаемым / понятным и позволяет людям лучше узнать, куда они идут, прежде чем нажимать на ссылку. В случае с размещенным в FA URL-адресом некоторые люди имеют привычку выделять ссылку для ее копирования, поэтому она написана полностью. Ссылки jsfiddle имеют заголовок, чтобы лучше разбить страницу, иначе легче пропустить, а ответы могут выглядеть загроможденными.
Хастиг Зусамменстеллен

11

Самый простой способ - установить свойство css для вертикального выравнивания на середину.

i.fa {
    vertical-align: middle;
}

3
.svg-inline--faдля FontAwesome 5
darylknight

@darylknight, что это значит? Как бы я активировал / использовал это? Добавить что-нибудь после моего fa-clockв классе?
Профессор Фалькен


3

Попробуйте установить значок как height: 100%

Вам не нужно ничего делать с оберткой (скажем, с вашей кнопкой).

Это требует Font Awesome 5. Не уверен, работает ли он для более старых версий FA.

.wrap svg {
    height: 100%;
}

Обратите внимание, что значок на самом деле является svgграфическим.

демонстрация


2

Для тех, кто использует Bootstrap 4, это просто:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Это не имеет смысла в качестве вертикального выравнивания: середина, которая применяется этим классом, предназначена только для таблиц.
Лукас Манцке

1

Другой вариант точной настройки высоты линии значка - использование процента от vertical-alignсвойства. Обычно 0% внизу и 100% вверху, но можно использовать отрицательные значения или более сотни для создания интересных эффектов.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

1

Я бы обернул текст так, чтобы вы могли выбрать его отдельно. Теперь, если вы плаваете влево и вправо, вы можете использовать высоту строки для управления вертикальным интервалом. Установка его на ту же высоту, что и (30px), выровняет его по центру. Смотрите здесь .

Новая разметка:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Новый CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

4
Вертикально-Align не делает ничего на блочных элементах, он работает только на встроенных или таблицы клеточных элементов.
Цимманон

Я вижу, установка line-height = высота контейнера и плавающие вещи остались работающими и нуждаются в меньшем наборе текста. Вот обновленная скрипка с уменьшенным шумом: jsfiddle.net/F3KyK/7
Пол

Лучше просто установить vertical-align: middleна значок и текст. Таким образом, вы не будете делать предположения о высоте иконки, и CSS будет меньше.
Марос

0

При использовании flexbox вертикальное выравнивание шрифтов рядом с текстом может быть очень сложным. Я попробовал поля и отступы, но это переместило все элементы. Я пробовал разные изгибы, такие как центр, начало, базовая линия и т. Д., Но безрезультатно. Самый простой и чистый способ настроить только значок - установить для него значение div. position: relative; top: XX;Это отлично сработало.


0

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

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

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Пример: JsFiddle


0

Просто определите vertical-alignсвойство для элемента icon:

div .icon {
   vertical-align: middle;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.