Как центрировать выравнивание шрифта удивительные значки по вертикали в круге div?

Я пытаюсь центрировать выравнивание шрифта вокруг центра значков по вертикали. Если есть текст, мы можем сделать это, используя свойство line-height, даже я попытался дать line-height ту же высоту, что и высота div.

Пробовал display:inline-block и vertical-align:middle не сделал трюк.

Как центрировать значки вертикально во всех размерах. Он должен быть динамическим, так как размер значка может отличаться. Так что hardcode margin-top может не работать для другого размера значка, а также div.

CODE

.exp{
    width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
}

JSFIDDLE

Ответы

Ответ 1

Вы можете использовать line-height для выравнивания значка в div.

Попробуйте добавить этот .fa-camera-retro { line-height: inherit;} к вашему css. Использование inherit позволяет line-height взять высоту содержащего div, поэтому все значки будут центрироваться, даже если эти divs имеют разные размеры. Если вы хотите, вы также можете установить line-height на высоту div в пикселях, чтобы явно центрировать его, то есть line-height: 80px ,

Здесь приведен пример работы fiddle.

Ответ 2

Не отвлекать от решения, которое отлично работает, но Font Awesome 4 имеет отличную функцию укладки, которая может использоваться со следующим кодом.

<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

Здесь есть некоторые действительно приятные варианты и комбинации, которые можно найти здесь.

Ответ 3

Установите класс для шрифта awesome таких как .fa-vc затем добавьте его во весь шрифт, который вы хотите, чтобы он был выровнен с другим текстом. ваш код будет выглядеть (этот образец является знаком "x" )

<i class="fa fa-times fa-vc"></i>

и установите этот класс в

.fa-vc{line-height:inherit!important;}

это приведет к переопределению шрифта по умолчанию (line-height: 1px)

проблема решена...

Ответ 4

Здесь mixin, который мне нравится использовать для общего вертикального выравнивания:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@include vertical-align;

Прекрасно работает, если вы используете Boostrap, используйте класс center-block, и он идеально по центру.

Ответ 5

vertical-align: middle будет работать, если вы установите div display: table-cell
http://jsfiddle.net/M3jxT/484/

Ответ 6

равная линия-высота и выравнивание текста: центр работает очень хорошо, чтобы сделать значок посередине как по вертикали, так и по горизонтали. Однако, если вы хотите сделать что-либо центрированное как по вертикали, так и по горизонтали динамическим способом, код вроде этого -

Разметка:

<div class="container>
   <div class="target">
   </div>
</div>

CSS

.container{
   position: relative;
}

.target{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

Ответ 7

Использование класса fa-fw делает их правильно выровненными.

<div class="col-sm-1"> 
    <i class="fa fa-mobile fa-fw"></i>
</div>

Проверьте действие. http://jsfiddle.net/ahj0ncpa/

Ответ 8

Я столкнулся с аналогичной проблемой для вертикального выравнивания шрифта, удивительного значка в хроме и Mozilla.

У меня был div, обертывающий мой удивительный элемент шрифта.

Мой HTML:

<div class="icon-wrap">
    <span class="fa fa-times"></span>
</div>

задание размера шрифта в em устраняет проблему.