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 center your website horizontally with CSS?
To center your website horizontally with CSS, set a div where all the content of the website will be set. Align it in a way to center it horizontally. For that, we will use the margin and max-width property.
Set the Website’s Main div
Set a div and within that some elements to make it somewhat look like a sample website −
<div class="main"> <h1>Center website horizontally example</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad nemo, nisi fugiat dolores quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero, quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p> </div>
Style the div to Center Your Website Horizontally
We will style the above div main and use the margin property with the value auto. The max-width is also used to set the maximum width of the main div −
.main {
max-width: 600px;
margin: auto;
background: rgb(70, 32, 240);
color: white;
padding: 10px;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
background: rgb(255, 238, 0);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.main {
max-width: 600px;
margin: auto;
background: rgb(70, 32, 240);
color: white;
padding: 10px;
}
p {
font-size: 30px;
font-weight: lighter;
}
</style>
</head>
<body>
<div class="main">
<h1>Center a website horizontally example</h1>
<p>This is a demo paragraph. Ad nemo, nisi fugiat dolores
quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero,
quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p>
</div>
</body>
</html>
Updated on: 16-Nov-2023
144 Views
Advertisements