How to center an image using text-align center with CSS?

Spread the love

Sometimes, we want to center an image using text-align center with CSS.

In this article, we’ll look at how to center an image using text-align center with CSS.

How to center an image using text-align center with CSS?

To center an image using text-align center with CSS, we use flexbox.

For instance, we write

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

to make the elements with class container a flex container with display: flex;.

Then we horizontally and vertically center the contents inside the container with justify-content: center; and align-items: center; respectively.

Conclusion

To center an image using text-align center with CSS, we use flexbox.

Leave a Reply

Your email address will not be published.