How to create a horizontal line with text in the middle using Css
In this post we will give you information about How to create a horizontal line with text in the middle using Css. Hear we will give you detail about How to create a horizontal line with text in the middle using CssAnd how to use it also give you demo for it if it is necessary.
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 > <div ></div> <h2>Top Courses</h2> <div ></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.
Hope this code and post will helped you for implement How to create a horizontal line with text in the middle using Css. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs