CSS如何将块状元素对齐到中心

CSS中的margin属性可以用来将一个块状元素（如div）水平居中。我们可以设置该元素的宽度，这样就可以防止容器被拉长。块状元素占用了整个空间线，迫使其他元素占用了下一行，因为块状元素拥有100%的容器。

将块状元素对准中心

任何在网页上开始一个新行的元素都被认为是块级元素。例如，标题标签、div等。

这些块状元素占据了网页的全部宽度。比方说，我们的网页上有一个元素，它只占网页的10%，但如果它是一个块状元素，那么，它将占到100%的宽度。

我们可以通过设置块属性的值来改变任何特定元素的显示属性。

语法

让我们来看看display属性的语法 —

display: value;

以上是display属性的语法，可以用来定义网页上某个特定元素的外观。

边缘属性

现在我们知道了块状元素的行为，我们将使用margin属性将元素在水平面上对齐。

margin属性将控制块元素的位置。我们将以这样的方式使用该属性，即它能使元素居中，因为边距可以控制元素在水平和垂直方向上的位置。

语法

让我们来看看margin属性的语法：

margin: value;

这里给出的是margin属性的语法，应该从左右两边指定margin，这样块状元素就会居中。auto值可以用来设置margin，这样块状元素就可以自动对齐到中心。

注意 – 有一个属性text-align，其值为center。这个属性不能用在这种方法上，因为它用于非块状元素的居中，如段落、跨度标签等。

示例

为了更好地理解该属性的功能，让我们来看一个例子，在这个例子中，我们添加了一些标题和一个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。

示例

在下面的程序中，我们将采取一个图像，和一个紧挨着图像的非块元素。然后，我们将图像的显示设置为block，它的margin设置为auto，然后将它与标题对齐，同时将段落的显示属性设置为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://www.tutorialspoint.com/images/logo.png">
   <p style="display: inline-block;">
      Hi this is another example for aligning the block element to the centre.
   </p>
</body>
</html>

在输出中，你可以看到图像在中间，文字在下一行，正如我们所希望的。