by Sai gowtham

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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course