如何將區塊元素居中對齊？
- WBOY轉載
- 2023-09-05 18:13:021305瀏覽
CSS 中的 margin 屬性可用來將區塊元素（如 div）水平置中。我們可以設定元素的寬度，這樣可以防止容器拉伸。塊元素佔據完整的空間線，這迫使其他元素佔據下一行，因為塊元素擁有 100% 的容器。
將區塊元素置中對齊
網頁上任何開始新行的元素都被視為區塊級元素。例如標題標籤、div等
這些區塊元素佔據網頁的整個寬度。假設我們的網頁上有一個元素，它只佔用網頁的 10%，但如果它是區塊元素，那麼它將佔用寬度本身的 100%。
我們可以透過將值設為 block 屬性來變更任何特定元素的顯示屬性。
語法
讓我們來看看顯示屬性 -
display: value;
以上是 display 屬性的語法，可用來定義網頁上特定元素的外觀。
邊距屬性
現在我們知道了區塊元素的行為，我們將使用 margin 屬性在水平面上對齊元素。
margin 屬性將控制區塊元素的位置。我們將以元素居中的方式使用該屬性，因為邊距可以控制水平和垂直平面中的元素。
文法
讓我們來看看 margin 屬性的語法 -
margin: value;
這裡給出的是 margin 屬性的語法，並且應該從左到右指定邊距，以便區塊元素居中。 auto值可用於設定邊距，使塊狀元素自動居中對齊。
注意 - 有一個屬性 text-align 及其值中心。此屬性不能用於此方法，因為它用於居中非區塊元素，如段落、跨度標籤等。
範例
為了更好地理解該屬性的功能，讓我們看一個範例，在這個範例中，我們新增了一些標題和一個div，其邊距在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 來對齊區塊元素。
範例
在下面的程式中，我們將取得一個圖像以及圖像旁邊的一個非區塊元素。然後，我們將圖像的顯示設為區塊，將其邊距設為自動，然後將其與標題對齊到中心，並將段落的顯示屬性設為內聯塊。
<!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://www.tutorialspoint.com/images/logo.png" alt="如何將區塊元素居中對齊？" >
<p style="display: inline-block;">
Hi this is another example for aligning the block element to the centre.
</p>
</body>
</html>
在輸出中，您可以看到圖像位於中心，文字位於下一行，正如我們想要的那樣。
結論
將區塊元素與中心對齊是創建平衡和對稱佈局的好方法。透過使用文字對齊或邊距自動值，您可以快速輕鬆地對齊設計中的任意數量的元素。透過一些練習，您將能夠自信地使用這些技術！
以上是如何將區塊元素居中對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！