Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
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: 2023-11-16T14:09:43+05:30
231 Views
Advertisements