Author -  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.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY