CSS边距自动不居中

Posted 2023-03-05

技术标签:

【中文标题】CSS边距自动不居中【英文标题】：CSS margin auto not centering 【发布时间】：2013-05-24 01:18:41 【问题描述】：

我已经尽可能地简化了代码，但仍然无法使其居中。我相信我对CSS 的缺乏经验不允许我看到非常简单的东西。

如果有人也知道一些好的 CSS 资源，那就太好了。我已经阅读了许多 CSS 书籍的章节，但它们都非常基础并且涵盖了相同的内容。

CSS 标记：

/* MAIN ––––––––––––––––––––– */
html 
    /* overflow-y:scroll; */

body 
    /* margin:0; */
    /* position:relative; */

/* Form ––––––––––––––––––––– */
#form 
    margin:0 auto;
    width: 300px;
    height: 200px;
    display: inline-block;
    border: 2px solid black;

index.html

<html>
  <body>

    <form id='form'></form>

  </body>
</hml>

【问题讨论】：

【参考方案1】：

如果您想使用 margin:auto 进行居中，请将显示更改为阻止。这不适用于内联元素。

【讨论】：

Text-align:center 适用于 inline 和 inline-block 元素，如果您需要混合 inline 和 block，那么您可以使用它。

以上是关于CSS边距自动不居中的主要内容，如果未能解决你的问题，请参考以下文章

为啥边距 0 自动不居中，即使有规定的宽度？