Как центрировать текст по вертикали с большим шрифтом - удивительный значок?

Ответ 1

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

См. Jsfiddle Demo

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

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

• не играйте с вертикальным выравниванием текста
• играть с вертикальным выравниванием шрифта-удивительный значок

<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

Ответ 3

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

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

Добавьте 3x, 4x и т.д. в то же определение, что и требуется.

Ответ 4

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

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

i.fa {
  line-height: inherit;
}

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

Ответ 5

опция 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>

Ответ 6

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

i.fa {
    vertical-align: middle;
}

Ответ 7

Это сработало хорошо для меня.

i.fa {
  line-height: 100%;
}

Ответ 8

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

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

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

.wrap svg {
    height: 100%;
}

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

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

Ответ 9

Я бы обернул текст так, чтобы вы могли выбрать его отдельно. Теперь, если вы плаваете влево и вправо, вы можете использовать высоту строки для управления вертикальным интервалом. Установка его на ту же высоту, что и (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;
}

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

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

Ответ 13

у шрифтов стандартное решение, я использую его, когда мне нужно расположить значок по центру в строке: https://fontawesome.com/how-to-use/svg-with-js

Ответ 14

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

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

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

Пример: JsFiddle