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

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

• не играйте с выравниванием текста по вертикали
• поиграйте с вертикальным выравниванием значка font-awesome

<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

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

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

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

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

См. Демонстрация 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;
}

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

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

i.fa {
  line-height: inherit;
}

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

вариант 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/

использование гибкости и font awesome 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/

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

i.fa {
    vertical-align: middle;
}

У меня это сработало.

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

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

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

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

.wrap svg {
    height: 100%;
}

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

Демо

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

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

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

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

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

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

 <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;
}

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

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

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

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

Пример: JsFiddle.

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

div .icon {
   vertical-align: middle;
}