資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 居中 <div> 標籤？
對於網頁佈局，在 CSS 中居中 <div> 至關重要。居中 div 的任務是每個開發人員在其職業生涯中的某個時刻都會遇到的，如果不是每天的話。每個人都有一個方便的方法，但對於初學者來說，它偶爾會令人煩惱。
這些 CSS 方法提高了網頁設計的視覺吸引力和可用性，這些方法確保了動態和平滑的居中效果。在檢視這些方法之前，讓我們先快速瞭解一下 div 標籤。
HTML div 標籤
在 HTML 中，<div> 標籤用作分隔符或部分。HTML <div> 標籤用於對 HTML 元素進行分組，這些元素隨後被賦予容器並被賦予 CSS 或 JavaScript 樣式。class 或 id 屬性使裝飾 div 標籤變得簡單。
語法
以下是 HTML div 標籤的語法：
<div>......</div>
示例
讓我們看看下面的示例，我們將使用 flexbox 居中 div。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
height: 300px;
background: #D5F5E3;
display: flex;
align-items: center;
color: #DE3163;
font-family: verdana;
justify-content: center;
}
.tp1 {
background-color: #CCD1D1;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<div class="tp">
<div class="tp1">WELCOME TO TUTORIALSPOINT</div>
</div>
</body>
</html>
當我們執行以上程式碼時，它將生成一個包含 div 框的輸出，其中一個居中並在網頁上顯示。
示例
考慮另一種情況，我們將使用 CSS Justify-Content 屬性
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D5F5E3;
}
.tp {
margin: 100px;
border: 1px solid #17202A;
display: flex;
justify-content: center;
font-family: verdana;
color: #DE3163;
}
</style>
</head>
<body>
<div class="tp">
<p>MS Dhoni Lifts The WorldCup</p>
</div>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，顯示網頁上居中的 div 文字。
示例
在下面的示例中，我們將使用網格居中 div。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
}
section {
font-family: verdana;
color: #DE3163;
font-size: 50px;
height: 450px;
display: grid;
place-items: center;
}
.tp {
background-color: yellow;
}
</style>
</head>
<body>
<section>
<div class="tp">WELCOME</div>
</section>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，該輸出包含在網頁上顯示的居中對齊的文字。
更新於： 2024年1月8日
297 次檢視
廣告