Як центрувати текст вертикально за допомогою великої піктограми шрифту?

Давайте скажемо, що у мене є кнопка завантажувального пристрою із значком шрифтів і деяким текстом:

<div>
    
    hello world
</div>

How do I make text appear vertically centered? Text is aligned with the bottom edge of the icon now: http://jsfiddle.net/V7DLm/1/

EDIT: I have a possible solution: http://jsfiddle.net/CLdeG/1/ but it feels a bit hacky - introduces extra p tag, uses pull-left and display:table. Maybe someone can suggest an easier way.

183
Ти бог. Серйозно, я витратив на це сьогодні 2 години, ваше рішення було НАЙКРАЩЕ. Немає необхідності жорсткого коду.
додано Автор Chuck, джерело

12 Відповіді

Мені треба було самому це зробити, потрібно зробити це навпаки.

  • do not play with the vertical-align of your text
  • play with the vertical align of the font-awesome icon
<div>
  
  hello world
</div>

Звичайно, ви не можете використовувати вбудовані стилі і націлювати його на власний клас CSS. Але це працює в режимі копіювання.

See here: Vertical alignment of text and icon in bootstrap button

Якщо це було до мене, однак, я б не використовував значок-2x. І просто вкажіть розмір шрифту сам, як у наступному

<div class='my-fancy-container'>
    
    Hello World
</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;
}

for a working example, please see http://jsfiddle.net/3GMjp/77/

243
додано
так, це краще рішення, спасибі. Проте, здається, що він вимагає висоти рядка, хоч jsfiddle.net/paulftw/F3KyK/41
додано Автор Paul, джерело
Важливо розуміти, що в тому числі файли fontawesome JS також можуть змінювати вигляд. Моя піктограма була занадто далеко до вершини, я видалив JS включення, щоб побачити, що станеться, і тепер це занадто далеко до дна.
додано Автор lucidbrot, джерело
Не працює з деякими іконками. приклад f-angle-left
додано Автор steakchaser, джерело
У першому фрагменті коду початковий тег не відповідає мітці закінчення .
додано Автор jzacharuk, джерело
дякую вам людині;)
додано Автор Marco, джерело
Я оновив ваш jsfiddle для того, як я це зроблю. Я використовував розмір шрифту для значка замість використання 2x. jsfiddle.net/3GMjp/1
додано Автор andxyz, джерело
завдяки @jzacharuk для лову помилку.
додано Автор andxyz, джерело

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

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

Додайте 3x, 4x і т.д. до того ж самого визначення, як потрібно.

41
додано
@ Kendall Roth Я думаю, коли люди говорять, що не можна використовувати vertical-align: middle , вони означають якщо ви використовуєте елементи block . Якщо ви використовуєте inline , inline-block або table-cell , ви повинні бути хорошими. MDN: вертикальне вирівнювання
додано Автор rinogo, джерело
На мою думку, це повинна бути прийнята відповідь, оскільки вона є найпростішим рішенням, якщо я щось відсутній в оригінальному питанні. Завдяки @rushonerok! Я не впевнений, чому деякі люди кажуть, що не використовуйте vertical-align: middle; - я, можливо, тут щось відсутній. Будь ласка, поясніть, якщо так.
додано Автор Kendall Roth, джерело

Після розгляду всіх запропонованих варіантів, найчистіше рішення, здається, встановлює висоту рядків і вирівнювання по вертикалі:

See 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;
}
33
додано
Що робити, якщо ваш контейнер перевищує 50px? Тоді він не буде працювати ... У мене є зміст, який змінює розмір, і він повинен мати в центрі значок всередині ... будь-яка ідея про це?
додано Автор Slaven Tomac, джерело

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

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

i.fa {
  line-height: inherit;
}

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

19
додано
дуже дякую! Не вдалося виконати всі рішення з вертикальним вирівнюванням: середнім або вертикальним вирівнюванням: 50% і т.д. Це робить свою справу !
додано Автор KGCybeX, джерело

опція flexbox

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
    
    hello world
</div>
</div> </div>

Скрипка

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

9
додано
Це може призвести до центрування піктограми вертикально в межах div, а не тільки в рядку тексту. Працює відмінно!
додано Автор Sean the Bean, джерело

Найпростішим способом є встановлення властивості CSS з вертикальним вирівнюванням до середини

i.fa {
    vertical-align: middle;
}
9
додано
@darylknight, що це означає? Як я можу активувати/використовувати це? Додати щось після мого fa-clock у класі?
додано Автор Prof. Falken, джерело
.svg-inline - fa для FontAwesome 5
додано Автор darylknight, джерело

Це добре працювало для мене.

i.fa {
  line-height: 100%;
}
4
додано

Інший варіант для точної настройки висоти рядка піктограми - це відсоток властивості vertical-align . Як правило, 0% - це нижня, а 100% - верхня, але можна використовувати негативні значення або більше сотні, щоб створити цікаві ефекти.

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

Try set your icon as height: 100%

Вам не потрібно нічого робити з обгорткою (скажімо, кнопкою).

Для цього потрібна програма Font Awesome 5. Не впевнений, що він працює для старих версій FA.

.wrap svg {
    height: 100%;
}

Зверніть увагу на те, що ця ікона є графікою svg .

Демо

1
додано

I would wrap the text in a so you can target it separately. Now if you float both and left, you can use line-height to control the vertical spacing of the . Setting it to the same height as the (30px) will middle align it. See here: http://jsfiddle.net/F3KyK/4/

Нова позначка:

 <div>
    
    hello world
</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
додано
Вертикальне вирівнювання не робить нічого на елементах блоку, він працює тільки на елементах вбудованих або табличних елементів.
додано Автор cimmanon, джерело
Я бачу, встановлення висоти рядка = висота контейнера і плаваючих речей залишили роботу і потребує меншого набору тексту. Ось оновлена ​​скрипка зі зменшеним шумом: jsfiddle.net/F3KyK/7
додано Автор Paul, джерело
Краще просто встановити vertical-align: middle на значок і текст. Таким чином, ви не робите припущень щодо висоти піктограми, і менше CSS.
додано Автор Maros Hluska, джерело

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

0
додано

the fonts have the solution as standard, I use it when I have to center an icon in a string : https://fontawesome.com/how-to-use/svg-with-js

0
додано
Незважаючи на те, що це посилання може відповісти на запитання, посилання лише перешкоджає переповненню стека, ви можете поліпшити цю відповідь, взявши життєво важливу частину посилання та включивши його у відповідь. або видалено :)
додано Автор WhatsThePoint, джерело