Create a horizontal divider with centered text

Written byPhuoc Nguyen

Created

18 Dec, 2023

Tags

CSS grid, horizontal divider

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.

html

<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.

css

.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.

css

.divider__separator {
    flex: 1;
}

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

css

.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.

html

<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.

css

.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:

css

.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 post 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!

Create a split-screen layout→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn