Aligning Content in CSS: How to Use the align-content Property Effectively

Amazing news that will make everyone excited!

Good news! The CSS property for vertical alignment is finally here. It’s the align-content property, which was previously used in Flexbox and Grid layouts, and now it can also be used in regular block elements!

Example Demo

For instance, here’s the following CSS and HTML code:

<ul>
  <li>I should follow Melin's blog</li>
  <li>Thanks for your following</li>
</ul>

ul {
  height: 150px;
  border: solid;
  align-content: center;
}

The result at this point is shown in the following image, and it’s actually perfectly vertically centered!

It also naturally supports aligning to the bottom.

Since it supports the align-content property rather than just a specific value, the bottom alignment effect in regular elements is also easily achievable. For example, here’s how it can be used in a bar chart implementation:

<div class="box">
    <div class="bar" style="--percent: 20"></div>
    <div class="bar" style="--percent: 40"></div>
    <div class="bar" style="--percent: 70"></div>
    <div class="bar" style="--percent: 50"></div>
</div> 

.box {
    height: 200px;
    border-bottom: 1px solid;    
    border-left: 1px solid;
    align-content: end;
}
.bar {
    display: inline-block;
    width: 10px;
    margin-inline: 20px;
    background-color: green;
    height: calc(1% * var(--percent));
    vertical-align: bottom;
}

This produces the alignment effect shown in the image below, and there’s no need to use helper elements or have to rely on Flexbox layout anymore, like before.

So, how about horizontal centering?

So, if the align-content property supports vertical centering, what about the justify-content property for horizontal centering?

Most people might expect it to be supported, since the main difference between the two is just the direction.

In fact, regular elements don’t support the justify-content property; it only works with a Flexbox or Grid layout.

Here’s the browser’s prompt message:

So, what about the place-content property?

The place-content property combines align-content and justify-content. So, when place-content is applied to regular elements, it only produces effects based on the direction. Here’s an example:

<p>
  <img src="https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg" width="256">
</p>

p {
  border: solid;
  height: 300px;
  width: 300px;
  place-content: center;
}

Currently, the image is vertically centered, but not horizontally centered, as seen in the screenshot below: