Create a horizontal divider with centered text

Here's what we'll cover:

• How to create a grid using the display: grid declaration
• How to define columns of a grid explicitly using the grid-template-columns property

A horizontal divider is a visual element that separates content into distinct sections, using a line that spans the width of a page or container. Its purpose is to improve readability and organization by creating clear visual distinctions between different sections of content. You can use horizontal dividers in many contexts, including web design, document formatting, and graphic design. They're especially useful for breaking up longer pieces of content into smaller, more manageable chunks for the reader.

One common approach is to use a horizontal divider with centered text. Magazine layouts, for example, often use horizontal dividers to separate different articles or sections within an issue. The name of each section is typically centered within the divider, making it easy for readers to quickly find what they're looking for.

On websites, horizontal dividers can break up long pages of content into more manageable sections. For instance, on a product page for an e-commerce site, a horizontal divider could separate the product description from customer reviews, with the title of each section centered within the divider.

Using horizontal dividers with centered text is a simple but effective way to improve the organization and readability of various types of content.

In this post, we'll learn how to create a horizontal divider using CSS grid. But before we dive in, let's explore how we can use CSS flexbox to achieve the same effect.

Simplifying layouts with CSS flexbox

Let's say you have a divider that consists of three elements: text in the middle, and horizontal lines on either side.

<div class="divider">
    <div class="divider__separator"></div>
    <div class="divider__text">Text</div>
    <div class="divider__separator"></div>
</div>

We can use CSS flexbox to organize our layout. To do this, we need to first set the container to be a flex container by using display: flex. This allows us to easily center the child elements along the vertical axis (also known as the cross axis) by using the align-items property.

.divider {
    align-items: center;
    display: flex;
}

To create equal spacing and center the text element, we simply use the flex: 1 property for the separators.

.divider__separator {
    flex: 1;
}

Finally, we establish the border for each separator, which creates the horizontal lines on both sides of our text.

.divider__separator {
    border-top: 1px solid rgb(203 213 225);
}

Check out the demo below:

Enhancing separators with pseudo elements

Instead of using actual elements to represent separators, we can use the ::before and ::after pseudo elements. This simplifies the divider element, which can now be constructed with just a single text element.

<div class="divider">
    <div class="divider__text">Text</div>
</div>

To create separator lines using pseudo elements, we can target the divider element and use the ::before and ::after selectors. These selectors add content before and after the text element, respectively.

In our CSS code, we set the content property to an empty string, which creates a new element that can be styled using CSS. We still use the flex: 1 property to make the separators take up equal spacing and center the text element. To add a horizontal line above each of these pseudo elements, we set the border-top property, just like we did earlier.

.divider::before,
.divider::after {
    content: '';
    border-top: 1px solid rgb(203 213 225);
    flex: 1;
}

Using pseudo-elements is a fantastic way to simplify our HTML markup and keep our code clean and concise. By using this technique, we can create a divider that looks just like the one we made in the previous section.

Simplifying layouts with CSS grid

Rather than using CSS flexbox, we can use CSS grid to achieve the same layout. Take a look at this example to see how the divider class would look using CSS grid:

.divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

No worries if you're not familiar with these declarations. Let's dive into them!

First up is display, a CSS property that sets how an element should be displayed. Here, we're swapping out flex for grid, which gives us a grid container for our divider. This lets us use CSS grid properties to create the layout.

Next is grid-template-columns, which sets the size and number of columns in the grid container. We're using 1fr auto 1fr to create three columns of equal width. The first and third columns have a width of 1 fraction unit (1fr), while the second column (which contains our text) takes up whatever remaining space is available (auto). This ensures that our text is always centered within the divider, no matter how long it is.

Finally, we use align-items to vertically center the child elements of the divider. It works in the same way as the flexbox layout we used before.

By combining these three properties, we can easily create a simple yet effective layout for our horizontal divider with centered text.

Conclusion

There are a couple of ways to make a horizontal divider with centered text, but two popular methods involve using CSS flexbox or pseudo elements.

But in this post, we explored how to achieve the same design using CSS grid. We used the display: grid property to create a grid container and set the columns and their sizes with the grid-template-columns property. These techniques help you create a stylish horizontal divider that looks great and matches your design preferences.

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

• DEV
• GitHub
• Website