Как я могу сделать свой текст вертикально выровненным в DIV?

Question

У меня есть этот код:

<div style="font-size: 1.5rem; width: 20%;vertical-align: middle;" >ABC</div> 

Когда я смотрю на странице он показывает, как это. Я добавил x, чтобы показать границу DIV:

xxxxxxxxxxxxxxx 
x    x 
x ABC   x 
x    x 
x    x 
xxxxxxxxxxxxxxx 

Кажется, что вертикальное выравнивание ничего не делает.

Могу ли я сделать это так, чтобы пространство над и под ABC было одинаковым. Я видел таблицы CSS и Flex. Есть ли способ сделать это со стандартным CSS или мне нужно использовать что-то вроде таблиц CSS или Flex?

Answer 1

Существует один способ решить эту проблему без display: table; и display: flex. Это немного сложно, но работает нормально.

Начнем с того, что ваш отрезанный не работает так, потому что свойство vertical-align применяется только к встроенным и табличным ящикам. A <div> - display: block по умолчанию и поэтому вне сферы действия.

Итак, что мы можем сделать? Это:

.vertical-align-content 
 
{ 
 
    height: 150px; 
 
    background-color: silver; 
 
} 
 

 
.vertical-align-content > span, 
 
.vertical-align-content::before 
 
{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.vertical-align-content::before 
 
{ 
 
    height: inherit; 
 
    content: ""; 
 
}

<div class="vertical-align-content"> 
 
    <span>Hello</span> 
 
</div>

Это решение ставит псевдо элемент insde из .vertical-align-content с высотой унаследованного от родительского контейнера. Псевдоэлемент и <span> оба установлены в display: inline-block и поэтому могут быть расположены с использованием vertical-align. Самый большой элемент (псевдоэлемент) заставит диапазон быть выровнен по вертикали по центру.

Answer 2

Используется для display собственности, как этот

display:table-cell; 

-

<div style="font-size: 1.5rem;border:solid 1px red; height:100px; width: 20%;display:table-cell;vertical-align: middle;" >abc</div>

Answer 3

вы можете попробовать это:

<div style="display: table; height: 300px; overflow: hidden;display: table-cell; vertical-align: middle;">abc</div> 

DEMO HERE

Answer 4

Почему бы просто не использовать высоту строки?

Fiddle: http://jsfiddle.net/SVJaK/2757/

<div class="test">ABC</div> 

CSS:

.test { 
    border: 1px solid green; 
    width: 200px; 
    line-height: 200px; 
}