Як центрувати текст вертикально з великим значком шрифту?

Скажімо, у мене є кнопка завантаження з приголомшливим значком шрифту та текстом:

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

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

EDIT: У мене є можливе рішення : 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. Але це працює в режимі копіювання пасти.

Дивіться тут: Вертикальне вирівнювання тексту та піктограми у кнопці

Якби це не залежало від мене, я б не використовував іконку-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/

за допомогою флексу та дивовижного шрифту 5

Розміщена URL-адреса 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%

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

Для цього потрібен шрифт 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
}

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

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

Що ж, це питання задавали роки тому. Я думаю, що технологія змінилася зовсім небагато, а сумісність браузера набагато краща. Ви можете використовувати вертикальне вирівнювання, але я вважаю, що деякі менш масштабовані та менш багаторазові. Я б рекомендував підхід до флешбоксу .

Ось той самий приклад оригінального плаката, який використовується, але з 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;
}