it-swarm.com.ru

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

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

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Как сделать так, чтобы текст отображался вертикально по центру? Текст теперь выровнен по нижнему краю значка: http://jsfiddle.net/V7DLm/1/

Правка: У меня есть возможное решение: http://jsfiddle.net/CLdeG/1/ , но это немного странно - вводит дополнительный тег p, использует pull- слева и дисплей: таблица. Может быть, кто-то может предложить более простой способ.

202
Paul

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

Смотрите 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;
}
34
Paul

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

  • не играть с выравниванием текста по вертикали
  • играть с вертикальным выравниванием шрифта-удивительный значок
<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;
}

рабочий пример см. на странице http://jsfiddle.net/3GMjp/77/ .

260
andxyz

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

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

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

44
Rush Frisby

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

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

i.fa {
  line-height: inherit;
}

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

21
purefusion

опция flexbox - шрифт потрясающий 4.7 и ниже

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/


используя flex и шрифт awesome 5

URL, размещенный в FA - 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/

11
Hastig Zusammenstellen

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

i.fa {
    vertical-align: middle;
}
11
ajaali

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

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

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

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

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

.wrap svg {
    height: 100%;
}

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

Демо

2
mriiiron

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

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

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

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

0
ADP