- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make horizontal line with words in the middle using CSS?
With CSS, we can make horizontal line with words in the middle. Additionally, we can also make horizontal line with headings and even image. Let us see some examples −
Make a horizontal line with words in the middle
Example
In this example, we will create a horizontal line with words in the middle using flex −
<!DOCTYPE html> <html> <head> <style> p { display: flex; flex-direction: row; } p:before, p:after { content: ""; flex: 1 1; border-bottom: 3px solid orange; margin: auto; } </style> </head> <body> <h1>Demo Heading</h1> <p>I am in the middle</p> </body> </html>
Output
Make a horizontal line with heading in the middle
Example
In this example, we will create a horizontal line with heading in the middle using flex −
<!DOCTYPE html> <html> <head> <style> h1 { display: flex; flex-direction: row; } h1:before, h1:after { content: ""; flex: 1 1; border-bottom: 3px solid orange; margin: auto; } </style> </head> <body> <h1>Demo Heading</h1> </body> </html>
Output
Make a horizontal line with image in the middle
Example
In this example, we will create a horizontal line with image in the middle using flex −
<!DOCTYPE html> <html> <head> <style> p { display: flex; flex-direction: row; } p:before, p:after { content: ""; flex: 1 1; border-bottom: 3px solid orange; margin: auto; } img { height: 100px; width: 250px; border-radius: 50%; } </style> </head> <body> <h1>Demo Heading</h1> <p><img src="https://www.tutorialspoint.com/images/logo.png"></p> </body> </html>
Output
Advertisements