Вертикальное выравнивание не работает на встроенном блоке

Мне сказали, что:

Вертикальное выравнивание работает только для встроенных, встроенных блоков, изображений и таблицы элементы.
Он должен применяться к дочернему элементу, поскольку он противоположен родительский элемент, в отличие от выравнивания текста.

Однако, когда я попытался установить вертикальное выравнивание по середине элемента встроенного блока, это не сработало. Почему?

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}

<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>

Ответ 1

Это не работает, потому что vertical-align устанавливает выравнивание содержимого встроенного уровня по отношению к их строке строки, а не к содержащему их блоку

Это свойство влияет на вертикальное позиционирование внутри строки строки ящики, созданные элементом встроенного уровня.

A line box -

Прямоугольная область, содержащая ящики, которые образуют линию

Когда вы видите текст, который имеет несколько строк, каждый из них является строкой. Например, если у вас есть

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

Ответ 2

Vertical-align на элементе inline/inline-block, изображениях, тексте... выровнять элемент вместе, а не по родительскому элементу.

Пример использования: выровнять смайлик в тексте

Вы можете обмануть, добавив псевдоэлемент шириной 0px и высотой 100%.

#wrapper {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    vertical-align: middle;
}
#wrapper:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}
#content {
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}

<div id = 'wrapper'>
    <div id = 'content'> content </div>
</div>

Ответ 3

Он работает для меня с помощью вертикального выравнивания: text-top;

<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>

.box {
   display: inline-block;
   width: 20%;
   margin: 5px;
   padding:10px;
   border-top: 5px solid #000000;
   vertical-align: text-top;
}

jsfiddle