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

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

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

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

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

<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 переопределит правило .fa FontAwesome, которое задает свойство 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/

используя 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/

Самый простой способ - установить свойство 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
}

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

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

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

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

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

Пример: JsFiddle

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

div .icon {
   vertical-align: middle;
}