CSS Центрирование текста по вертикали

Я пытаюсь центрировать текст по вертикали и использую трюк с переводом.

HTML

<div class="first">
    <div class="second">
        <span>TESTING</span>
    </div>
</div>

CSS

div.first > div.second {
   border: 1px solid red;
   height: 2em;
}

div.first > div.second > span{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Почему текст расположен не по центру по вертикали?Fiddler

Я замечаю, когда я изменяю свойство высоты css на текст с высотой строки, начинающийся с центра.

Может кто-нибудь объяснить мне, почему это так работает?


vertical-alignment css css-transforms centering
person user1297783    schedule 28.08.2014    source источник
comment
Проверьте мой ответ. Это может помочь вам.   -  person aniskhan001    schedule 29.08.2014

Ответы (2)


arrow_upward
0
arrow_downward

Span не является блочным элементом. Обратите внимание, что если вы добавите display:block в свой CSS, он будет выровнен по вертикали.

div.first > div.second > span{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

Или вы можете изменить свой диапазон на div.

person terrywb    schedule 28.08.2014
comment
В этой статье есть хороший обзор блочного и встроенного блоков: > stackoverflow.com/questions/9189810/ - person terrywb; 29.08.2014

arrow_upward
0
arrow_downward

Правильный способ иметь элемент вертикально по центру - это,

Установите эффективную ширину блока div с position на absolute, top со значением 50%, и установите родительский элемент с position на relative.

Пример:

div.first > div.second {
    position: relative;
}
div.first > div.second > span {
    position: absolute;
    top: 50%;
}

ДЕМО

height vs line-height

  • height — вертикальный размер контейнера.
  • line-height — это расстояние от вершины первой строки до вершины второй строки.

Поскольку у вас здесь только одна строка текста, вы видите ее в середине контейнера. Попробуйте добавить еще одну строку текста, и вы все ясно поймете.

person aniskhan001    schedule 28.08.2014