12
How to add centered text to the horizontal divider in HTML using CSS?
To add a centered text to the divider in HTML, we can use the CSS flexbox to achieve this.
HTML
<div>Hello world!</div>
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;
}
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>
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>
Now we need to convert the div
into a flex element. It can be done like this,
.divider {
display: flex;
}
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;
}
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;
}
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;
}
Now we have the divider like this,
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;
}
Now we have a beautiful horizontal divider with text in its center! Yay! π₯
See the above code live in JSBin
12