資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何將塊級元素水平居中？
CSS 中的 margin 屬性可以用來水平居中塊級元素，例如 div。我們可以設定元素的寬度，這樣可以防止容器拉伸。塊級元素佔據整行空間，這會導致其他元素佔據下一行，因為塊級元素佔據容器的 100%。
塊級元素的水平居中
任何在網頁上開始新行的元素都被認為是塊級元素。例如，標題標籤、div 等。
這些塊級元素佔據網頁的全部寬度。假設我們在網頁上有一個元素，它只佔據網頁的 10%，但如果它是塊級元素，那麼它將佔據 100% 的寬度。
我們可以透過將 display 屬性的值設定為 block 來更改任何特定元素的 display 屬性。
語法
讓我們看看 display 屬性的語法：
display: value;
以上是 display 屬性的語法，它可以用來定義網頁上特定元素的外觀。
margin 屬性
現在我們知道了塊級元素的行為，我們將使用 **margin** 屬性來水平對齊元素。
margin 屬性將控制塊級元素的位置。我們將以一種使元素居中的方式使用該屬性，因為 margin 可以控制元素在 **水平** 和 **垂直** 方向上的位置。
語法
讓我們看看 margin 屬性的語法：
margin: value;
這是 margin 屬性的語法，應該從左右指定 margin，以便塊級元素居中。auto 值可以用來設定 margin，以便塊級元素可以自動居中。
**注意** - 有一個屬性 text-align 和它的值 center。此屬性不能用於此方法，因為它用於居中非塊級元素，如段落、span 標籤等。
示例
為了更好地理解該屬性的功能，讓我們來看一個示例，在這個示例中，我們添加了一些標題和一個 div，其 margin 在 CSS 屬性部分設定為 auto，然後將它們與兩個內聯塊一起居中。div 的不同顏色告訴我們不同的顯示方式，例如內聯塊和其他。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of text alignment to the center</title>
<style>
*{
background-color:black;
}
.para {
color:white;
text-align: center;
}
.testinline {
padding: 10px;
border: 2px solid blue;
}
h1 {
font-size: 35px;
color: white;
width: fit-content;
margin: auto;
}
.container {
background-color: lightblue;
margin: auto;
border: solid red 1px;
padding: 15px 10px;
text-align: center;
width: fit-content;
}
.good-night {
padding: 10px;
border: 2px solid blue;
color: white;
display: inline-block;
}
.good-morning {
padding: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Hi, this an example</h1>
<p class="para">We are aligning the block elements to the text.</p>
<h1>Welcome</h1>
<div class="container">
How is your day Going
</div>
<div class="good-morning">
<div style="display: inline-block" class="testinline">
Good Morning
</div>
<div style="display: inline-block" class="testinline">
Good Night
</div>
</div>
</body>
</html>
在上面的輸出中，您可以看到標題和 div 元素與段落標籤一起居中。我們使用 **text-align** 屬性將段落標籤對齊到中心，並使用 margin 屬性並將它的值設定為 auto 來對齊塊級元素。
示例
在下面的程式中，我們將獲取一個影像和一個緊隨影像之後的非塊級元素。然後我們將影像的 display 設定為 block，並將它的 margin 設定為 auto，然後將其與標題一起居中，並將段落的 display 屬性設定為 inline-block。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example for text alignment </title>
<style>
h1 {
margin: auto;
width: 30%;
font-size: 24px;
margin-bottom: 8px;
background-color: black;
color: white;
}
.image{
display: block;
margin: auto;
}
</style>
</head>
<body>
<h1>
Example for setting the block element
</h1>
<img class="image" src="https://tutorialspoint.tw/images/logo.png">
<p style="display: inline-block;">
Hi this is another example for aligning the block element to the centre.
</p>
</body>
</html>
在輸出中，您可以看到影像位於中心，文字位於下一行，正如我們期望的那樣。
結論
將塊級元素居中是一種建立平衡和對稱佈局的好方法。透過使用 text-align 或 margin auto 值，您可以快速輕鬆地對齊設計中的任意數量的元素。透過一些練習，您將能夠自信地使用這些技巧！
4K+ 閱讀量
