DEV Community

loading...
Cover image for How to add centered text to the horizontal divider in HTML using CSS?

How to add centered text to the horizontal divider in HTML using CSS?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me Updated on ・3 min read

Originally posted here!

To add a centered text to the divider in HTML, we can use the CSS flexbox to achieve this.

TL;DR

HTML

<div>Hello world!</div>
Enter fullscreen mode Exit fullscreen mode

CSS

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

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

/* Space on left and right sides of text */
.divider:not(:empty)::before {
  margin-right: 0.25em;
}

.divider:not(:empty)::after {
  margin-left: 0.25em;
}
Enter fullscreen mode Exit fullscreen mode

First, let's make an <div> HTML tag and put the content which we need to show in the center of the divider inside the tag like this,

<div>Hello world!</div>
Enter fullscreen mode Exit fullscreen mode

Now let's add a class name to the div so that we can reference this in the CSS. it can be done like this,

<div class="divider">Hello world!</div>
Enter fullscreen mode Exit fullscreen mode

Now we need to convert the div into a flex element. It can be done like this,

.divider {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Now we need to horizontally align every item that is in the div tag, so to do that we can use the align-items flex property and set its value to center. it can be done like this,

.divider {
  display: flex;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Let's also align the text inside the tag using the text-align property and set its value to center like this,

.divider {
  display: flex;
  align-items: center;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Till now, there won't be any visual changes to the div tag.

Now to make a long line to the left and right side of the Hello world! text, we can make use of the ::before and ::after pseudo-elements in CSS.

We need to apply a 1px black color border to both of the div tag's ::after and ::before pseudo-elements. We also need to apply flex: 1 to the pseudo-elements. So that we will have a long line to the right and left side of the text.

NOTE: flex: 1 is a shorthand to set flex properties flex-grow : 1; , flex-shrink : 1; and flex-basis : 0;.

It can be done like this,

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

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

Now we have the divider like this,

nospace divider screenshot

But if you look closely the text Hello world! doesn't have much space on both its right and left sides. to set some space we can add this CSS also,

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

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

/* Space on left and right sides of text */
.divider:not(:empty)::before {
  margin-right: 0.25em;
}

.divider:not(:empty)::after {
  margin-left: 0.25em;
}
Enter fullscreen mode Exit fullscreen mode

Now we have a beautiful horizontal divider with text in its center! Yay! 🔥

See the above code live in JSBin

Feel free to share if you found this useful 😃.


Discussion (0)