不使用边距居中的元素：自动 [重复]答案

【问题标题】：Elements not centering using margin: auto [duplicate]不使用边距居中的元素：自动 [重复]
【发布时间】：2016-03-03 02:57:30
【问题描述】：

我试图在我的页面上的 div 容器中居中几个按钮，但使用 margin: auto 显然不起作用。谁能指出我做错了什么？

CSS

#finalizeButtons{
    display: block;
    margin-top: 5%;
    width: 100%;
    height: 35px;
    background-color: blue;
}

#finalizeButtons button{
    display: inline-block;
    float: left;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

HTML

<div id="finalizeButtons">
    <button id="finalize">Finalize</button>
    <button id="cancel">Cancel</button>
</div>

笔

http://codepen.io/anon/pen/xVGdxG

过早地回答明显的问题。是的，页面被声明为<!DOCTYPE HTML>，是的，finalizebuttons div 被包裹在 body 标记中，是的，它意味着 100% 的页面。

【问题讨论】：

标签： html css

【解决方案1】：

以下是可以在不影响您的情况下工作的代码原代码。

您只需按如下方式调整您的 CSS：

#finalizeButtons{
    display: block;
    margin-top: 5%;
    width: 100%;
    height: 35px;
    background-color: blue;
    text-align:center;
}

#finalizeButtons button{
    display: inline-block;
    float: none;
    background-color: red;
}

【讨论】：

如果您的问题得到解决，能否将其标记为已接受的答案？

【解决方案2】：

我触摸了您的代码，这就是解决方案： http://codepen.io/anon/pen/xVGdww 您正在使用向左浮动，然后元素永远不会居中，并使用文本对齐中心到容器期待它的帮助

#finalizeButtons{
                    display: block;
                    margin-top: 5%;
                    width: 90%;
                    height: 35px;
                    background-color: blue;
  text-align:center;
                }

                #finalizeButtons button{
                    display: inline-block;

                    margin-left: auto;
                    margin-right: auto;
                    background-color: red;
                }

【讨论】：

【解决方案3】：

看到这个fiddle

它没有居中，因为你有 float 属性。

用下面给出的 CSS 替换你的 CSS

#finalizeButtons {
  display: block;
  margin-top: 5%;
  width: 100%;
  height: 35px;
  background-color: blue;
  text-align: center;
}

#finalizeButtons button {
  display: inline-block;
  /* float: left; */
  /* margin-left: auto;
                    margin-right: auto; */
  background-color: red;
}

我认为您正在使用float:left 使它们一个接一个地对齐。实际上，只需使用 display:inline-block 就可以做到这一点，而且您已经拥有了。

现在，要使其居中，只需将 text-align:center 添加到容器中即可。

【讨论】：

【解决方案4】：

根据W3C documentation on automatic margin：

根据具体情况，提供 auto 值会指示浏览器根据其自己的样式表中提供的值呈现边距。但是，当这样的边距应用于具有有意义宽度的元素时，自动边距会导致所有可用空间都呈现为空白。

因此，您需要提供一个“有意义的宽度”，以便 margin: auto 实际上将元素置于其父元素的中心。

这是您的问题的解决方案，使用 margin: auto:

HTML：

<div id="finalizeButtons">
    <div>
        <button id="finalize">Finalize</button>
        <button id="cancel">Cancel</button>
    </div>
</div>

将此添加到您的 CSS：

#finalizeButtons div {
    width: 130px;
    margin: auto;
}

【讨论】：

啊，所以宽度不能是动态的？
没错。我已经编辑了我的答案以更好地解释这个概念。