如何將區塊元素居中對齊？-css教學-PHP中文網

將區塊元素置中對齊

語法

邊距屬性

文法

範例

Hi, this an example

Welcome

結論

首頁

web前端

css教學

如何將區塊元素居中對齊？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2023 pm 06:13 PM

如何將區塊元素居中對齊？

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 id="Hi-this-an-example">Hi, this an example</h1>
   <p class="para">We are aligning the block elements to the text.</p>
   <h1 id="Welcome">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 lazy"  src="/static/imghw/default1.png"  data-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>

登入後複製

在輸出中，您可以看到圖像位於中心，文字位於下一行，正如我們想要的那樣。