Sometimes, we want to fix vertical-align: middle not working on a span or div with CSS.
In this article, we’ll look at how to fix vertical-align: middle not working on a span or div with CSS.
How to fix vertical-align: middle not working on a span or div with CSS?
To fix vertical-align: middle not working on a span or div with CSS, we use flexbox.
For instance, we write
<div class="outer">
<div class="inner" />
</div>
to add nested divs.
Then we write
.outer {
display: flex;
align-items: center;
}
to make the outer div a flex container with display: flex;.
And we use align-items: center; to center align its contents vertically.
Conclusion
To fix vertical-align: middle not working on a span or div with CSS, we use flexbox.
