Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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
Updated on: 2022-12-05T12:11:43+05:30
3K+ Views
Advertisements