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

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

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

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

конечно, вы не можете использовать встроенные стили и нацелить его на свой собственный класс css. Но это работает в копипасте моды.

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

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

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

рабочий пример см. В разделе http://jsfiddle.net/3GMjp/77/

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

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

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

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

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

i.fa {
  line-height: inherit;
}

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

параметр элемента

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="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

скрипка

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

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

i.fa {
    vertical-align: middle;
}

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

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

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

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

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

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

для этого требуется шрифт Awesome 5. Не уверен, что это работает для более старых версий ОС.

.wrap svg {
    height: 100%;
}

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

демо

Я бы обернул текст в a, чтобы вы могли настроить его отдельно. Теперь, если вы плаваете и слева, вы можете использовать высоту линии для управления вертикальным расстоянием. Установка его на ту же высоту, что и (30px), выровняет его по середине. Смотрите здесь: http://jsfiddle.net/F3KyK/4/

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

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

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

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