Почему свойство vertical-align: middle не работает?

Question

Почему свойство veritcal-align: middle не работает? Как это исправить?

CSS:

.tutorial-block {
    font-size: 24px;
    margin-bottom: 40px;
    background-image: linear-gradient(to right, #bed2ff, #cabeff);
    border: 3px solid #a5aaff;
    border-radius: 10px;
    box-shadow: 10px 10px 15px #0002;
    height: 10vh;
    vertical-align: middle;
}

.tutorial-block-inner {
    height: 5vh;
}

HTML:

<main>
        
<p>
  <div class="tutorial-block"><span class="tutorial-block-inner">192</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">204</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">163</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">170</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">166</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">108</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">151</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">149</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">211</span></div>
  <div class="tutorial-block"><span class="tutorial-block-inner">182</span></div>
</p>

</main>

Answer 1

Свойство vertical-align применяется к элементам, которые нужно выровнять, а не к родительскому элементу. Однако для выравнивания текста по центру стоит использовать place-content с grid:

    .tutorial-block {
        display: grid;
        place-content: center;
    }

Почитайте про place-content, justify-content, align-content и похожие атрибуты. Рекомендую документацию Дока

БЛОГ НА HUSL

Почему свойство vertical-align: middle не работает?

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