Как выравнивает vertical-align в inline-block элементах?

Учебный код увидел по фиксированной (статичной верстке). Из него мне не понятно что делает vertical align. Я даже сделал рамку вокруг body , чтобы увидеть как по центру он два элемента ставит при vertical-align:middle; Но ничего не происходит. Или я свойство не понимаю это. Попытался текст какой то внутри написать, но он тоже не выравнивается вне зависимости от значения свойства vertical-align: top , middle или bottom. Что в этом коде делает vertical-align и как понять его работу тут ?

body {
  border: 2px solid black;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.fixed {
  display: inline-block;
  vertical-align: middle;
  background-color: blue;
  color: white;
  width: 900px;
  height: 300px;
  margin: 50px;
}
<body>
<div class="fixed">Знаешь, каждую ночь я вижу во сне море</div>
<div class="fixed">Знаешь, каждую ночь я слышу во сне песню.</div>
</body>

вот как изначально учебный пример выглядел , если надо введите сюда описание изображения


Ответы (0 шт):