html - 元素不使用边距居中 : auto

<分区>

我试图在我的页面上的一个 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%。

最佳答案

以下是无需过多触及您的代码即可运行的代码原始代码。

您只需按如下方式调整您的 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;
}

关于html - 元素不使用边距居中 : auto，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35755429/

上一篇：javascript - 使用 map 函数 div 到数组中

下一篇：HTML-Css 在 div 的右侧添加列

相关文章：

html - 让 flex 元素同时拉伸(stretch)和垂直居中内容？

html - Chrome 破坏了打印表格上的垂直对齐

javascript - polymer 纸图标按钮不会触发点击

在 Microsoft Edge 中使用 calc 的 CSS 关键帧

html - 将 margin-bottom 应用于元素

javascript - 如何旋转 Canvas 中选定的元素

html - 带空格的页面布局

html - 使用 CSS 来适应 HTML 网站的所有元素的最佳方法是什么？

javascript - 使用javascript更改div值中单词的颜色

jquery - 在 jquery 中使用滚动条作为动画的时间轴