为什么保证金：自动不起作用？ [复制]答案

【问题标题】：Why margin:auto doesn't work? [duplicate]为什么保证金：自动不起作用？ [复制]
【发布时间】：2013-02-07 16:36:42
【问题描述】：

我想将我的元素居中，但是当我使用

margin-left: auto;
margin-right: auto;

没用！

这是我的html

<section id="t">
    <article class="tc">Hi</article>
    <article class="tc">Hi agian!</article>
</section>

这是我的 CSS：

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
}
.tc {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    display: inline;
    border-style: solid;
    border-width:1px;
}

你可以看到结果here。

谁能帮帮我？

【问题讨论】：

啊，如何在浏览器中动态居中内容的古老问题...首先：display: inline 将使浏览器忽略.tc 上的宽度和边距样式跨度>
@BobFincheimer 那么我怎样才能在屏幕中心的一行中有两个元素呢？
跨浏览器（尤其是旧浏览器）很难做到这一点。如果您针对较新的解决方案，有很多简单的解决方案，只需 google 一下

标签： html css

【解决方案1】：

margin-left: auto;
margin-right: auto;

不会影响元素宽度display:inline。

如果你想让它工作，你应该给一个固定的宽度，并设置display:block或display:inline-block。

【讨论】：

我已经编辑了问题。
如果不知道元素宽度，将元素容器text-align设置为center
你能引用一个来源吗？在 MDN 中，没有提到固定的宽度要求，现在似乎每个人都偏爱 flexbox。
在spec for computing margin 中，直接声明内联元素的auto 的边距将变为0。没有提到“固定”部分。

【解决方案2】：

要让边距自动工作，您需要在项目上设置宽度。

#t { width: some-width; }

http://jsfiddle.net/2sagZ/7/

【讨论】：

我已经编辑了问题。
任何有边距的东西：自动需要一个宽度。在您更新的示例中，只需给 header 一个宽度

【解决方案3】：

您正在内联显示您的文章。只有块元素可以通过将它们的边距设置为auto 来居中。所以你需要让它们成为块级元素，margin: auto 才能工作。

默认情况下，您的主要部分标签的宽度为 100%。因此，如果它已经填满屏幕，则无法将其居中。因此，您需要将宽度设置为小于 100%，margin: auto 才能正常工作。

【讨论】：

以及如何在一行中显示它们。我希望它们在页面中心的一行中
从技术上讲，如果它已经填满屏幕，它是居中的，因为边距都被平等地归零：P
我已经编辑了问题。

【解决方案4】：

CSS

body{
    width:100%;
}

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    width:600px;
}
.tc {
    display:inline;
    border-style: solid;
    border-width:1px;
}

HTML

<body>
<section id="t">
    <article class="tc">Hi</article>
    <article class="tc">Hi agian!</article>
</section>
</body>

这是你想要的吗？

http://jsfiddle.net/ahmadalli/2sagZ/5/

【讨论】：

不！我想在页面中心的一行中添加元素！
然后从#t 中删除宽度，它应该会对齐。你到底想用这个 html 实现什么？
.tc { 边框样式：实心；边框宽度：1px； }
请参阅更正后的 html/css。我想这就是你想要的
this 就是你说的！这不是我想要的！

【解决方案5】：

如果您使用inline 样式，您可以使用text-align: center

http://jsfiddle.net/3MJEm/

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    text-align:center;
}

【讨论】：

看看this他们应该是分开的
我已经编辑了问题。

【解决方案6】：

#t 需要一个宽度才能居中。

articles 设置为 display:inline 时不会居中。

【讨论】：

我已经编辑了问题。
@ahmadalishafiee 在这种情况下，#header 需要一个宽度。
好的。这个问题解决了，但没有！

【解决方案7】：

您可以尝试给宽度一个百分比，例如 width: 75%;。我也会给 div 定位，我建议使用相对。

【讨论】：

我已经编辑了问题。

【解决方案8】：

#t {
margin: auto;
margin-top:10px;
width: 84px; 
}
.tc {
display: inline;
border-style: solid;
border-width:1px;
}

【讨论】：