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> <p style=display: inline-block;> hi this is another example for aligning the block element to the centre. </p></body></html>
在输出中，您可以看到图像位于中心，文本位于下一行，正如我们想要的那样。
结论将块元素与中心对齐是创建平衡和对称布局的好方法。通过使用文本对齐或边距自动值，您可以快速轻松地对齐设计中的任意数量的元素。通过一些练习，您将能够自信地使用这些技术！
以上就是如何将块元素居中对齐？的详细内容。