Html 未使用边距居中的图元：自动

我试图将页面上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>

定稿
取消

笔

---

过早地回答显而易见的问题。是的，页面被声明为

，是的

finalizebuttons

div被包装在一个body标签中，是的，它是指页面的100%。

以下是代码，它可以在不太影响用户的情况下工作 原始代码

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

#完成按钮{
显示：块；
利润率最高：5%；
宽度：100%；
高度：35px；
背景颜色：蓝色；
文本对齐：居中；
}
#结束按钮{
显示：内联块；
浮动：无；
背景色：红色；
}

我触摸了您的代码，这就是解决方案： 您使用的是向左浮动，然后元素永远不会居中，并使用文本将中心对齐到容器 期待它的帮助

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

看到这个了吗 它没有居中，因为您有

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

添加到容器中。

根据：

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

因此，您需要提供一个“meaninful width”，以便margin:auto将元素实际置于其父元素的中心

以下是您的问题的解决方案，使用margin:auto：

HTML:

---

啊，所以宽度不能是动态的？没错。我编辑了我的答案，以便更好地解释这个概念。如果您的问题得到解决，您能将其标记为接受答案吗？

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

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