資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法學如何使網站水平居中？
要使用 CSS 水平居中你的網站，請設定一個 div，網站的所有內容都將設定在那裡。以一種使其水平居中的方式對其進行對齊。為此，我們將使用 **margin** 和 **max-width** 屬性。
設定網站的 Main div
設定一個 div，並在其中新增一些元素，使其看起來像示例網站 -
<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>
設定 div 的樣式以使其水平居中
我們將設定上述 div main 的樣式，並使用值為 **auto** 的 **margin** 屬性。**max-width** 也用於設定 main div 的最大寬度 -
.main {
max-width: 600px;
margin: auto;
background: rgb(70, 32, 240);
color: white;
padding: 10px;
}
示例
讓我們看一個示例 -
<!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>
更新於： 16-11-2023
162 瀏覽
廣告