How to align contents inside a div with CSS?

Spread the love

Sometimes, we want to align contents inside a div with CSS.

In this article, we’ll look at how to align contents inside a div with CSS.

How to align contents inside a div with CSS?

To align contents inside a div with CSS, we use flexbox.

For instance, we write

<div
  style="
    display: flex;
    align-items: center;
    width: 200px;
    height: 140px;
    padding: 10px 40px;
    border: solid 1px black;
  "
>
  <div>
    <p>Paragraph #1</p>
    <p>Paragraph #2</p>
  </div>
</div>

to make the outer div with a flex container with display: flex;.

We align the items vertically centered with align-items: center;.

Conclusion

To align contents inside a div with CSS, we use flexbox.

Leave a Reply

Your email address will not be published.