it-roy-ru.com

Как выровнять текст по значку шрифта?

У меня есть очень простой HTML, который смешивает обычный текст и иконки:

<div class="ui menu">
    <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
    <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
    <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>

Проблема в том, что значки не отображаются точно на той же высоте, что и текст :

enter image description here

Любое предложение, чтобы исправить это?

41
Fractaliste

Вы можете добавить vertical-align:middle к элементам span:

ОБНОВЛЕННЫЙ ПРИМЕР ЗДЕСЬ

.nav-text {
    vertical-align:middle;
}
42
Josh Crozier

Здесь уже есть несколько ответов, но я нашел flexbox самым чистым и наименее «хакерским» решением: 

parent-element {
  display: flex;
  align-items: center;
}

Для поддержки Safari <8, Firefox <21 и Internet Explorer <10 (используйте этот полифильт для поддержки IE8 + 9) вам понадобятся префиксы поставщиков:

parent-element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
22
sam

vertical-align может принимать значение единицы измерения, поэтому при необходимости вы можете прибегнуть к нему:

{
  display:inline-block;
  vertical-align: 5px;
}

{
  display:inline-block;
  vertical-align: -5px;
}
18
getsetbro

Добавьте это к вашему CSS:

.menu i.large.icon,
.menu i.large.basic.icon {
    vertical-align:baseline;
}

DEMO

5
Arbel

Установите line-height в вертикальный размер изображения, затем выполните vertical-align:middle, как сказал Джош.

так что если изображение 20px, вы бы

{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
2
Marian Udrea

для центрирования по вертикали и горизонтали используйте это:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2
Alberto Lozano

Добавление к пролетам

vertical-align:baseline;

Не работал для меня, но

vertical-align:baseline;
vertical-align:-webkit-baseline-middle;

сделал работу (проверено на Chrome)

0
Tomer Almog

Вы можете использовать это свойство: vertical-align:middle;

.selector-class { 
    float:left;
    vertical-align:middle; 
} 
0
kishan Radadiya