How to fix vertical-align: middle not working on a span or div with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *