Почему свойство 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>