Question

我正试图在我的页面上的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％的页面。

Answer 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;
}

Answer 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;
                }

Answer 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添加到容器中。

Answer 4

根据W3C documentation on automatic margin：

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

所以你需要提供一个“meaninful width”来保证边距：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;
}

不使用保证金居中的元素：自动

4 个答案:

请参阅此fiddle