How to add centered text to the horizontal divider in HTML using CSS?
Tags: css
Published: 2021-06-24 00:00:00

---
  title: How to add centered text to the horizontal divider in HTML using CSS?
  published: true
  tags: CSS
  date: Thu Jun 24 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-text-in-center-on-divider-hr-html-css
  cover_image: https://melvingeorge.me/_next/static/images/main-4656c0c0886063b531cdb09ce3b56893.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-text-in-center-on-divider-hr-html-css)
  
To add a centered text to the divider in HTML, we can use the CSS flexbox to achieve this.

### TL;DR

**HTML**

```html
<div>Hello world!</div>
```

**CSS**

```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,

```html
<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,

```html
<div class="divider">Hello world!</div>
```

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

```css
.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,

```css
.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,

```css
.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,

```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;
}
```

Now we have the divider like this,

![nospace divider screenshot](https://melvingeorge.medivider-nospace-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,

```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;
}
```

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

See the above code live in [JSBin](https://jsbin.com/xuliqizoko/7/edit?html,css,output)

### Feel free to share if you found this useful 😃.

---