How to create a horizontal line with text in the middle using Css

In this tutorial, we willing learn about how to create a horizontal line with some text in the middle using css.

Getting started

Let’s start with an Html markup.

<div class="separator">
  <div class="line"></div>  <h2>Top Courses</h2>  <div class="line"></div></div>

In the above markup, we have a div element with separator class inside that we have two div elements with line class and h2 element with text.

Css

We are using the css flex-box, to create a horizontal line with a text is placed in the middle.

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

.separator h2{
  padding: 0 2rem; /* creates the space */
}

.separator .line{
  flex: 1;
  height: 3px;
  background-color: #000;
}

In the above code, we have used the flex-box in .sperator class, so that it creates a flex-container and aligns all three elements horizontally.

The align-items: center property aligns the elements vertically center.

Inside the .line class we have used flex:1 and height: 3px, so that it creates the flexible horizontal lines with 3px of height.

Here is the output in codepen.