如何水平居中对齐按钮？答案

【问题标题】：How do I horizontally center align a button?如何水平居中对齐按钮？
【发布时间】：2014-04-20 13:58:53
【问题描述】：

我正在尝试自定义预先编写的代码，因此我不是编码专家，需要用外行的方式向我解释。基本上，我正在尝试水平居中对齐订阅按钮。

下面是我的代码：

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

【问题讨论】：

这个div之外还有div吗？还是 div 或 window 水平居中对齐？

标签： html button alignment center

【解决方案1】：

将元素水平居中的最简单方法是在 CSS 中将其 margin-left 和 margin-right 设置为“auto”。

例如，通过 id 设置元素样式：

#mc-embedded-subscribe {
    margin-left: auto;
    margin-right: auto;
}

或使用margin 将具有“按钮”类的元素水平居中，没有顶部或底部边距：

input.button {
    margin: 0 auto;
}

AleshaOleg 的内联样式也可以使用。（如果您对 CSS 不满意，这可能是更好的选择。

【讨论】：

【解决方案2】：

你有很多写答案，但我想添加更多东西来实现这一点

您必须使用“margin:0 auto”这将使元素在其直接容器中居中对齐。
您的容器的宽度应大于您希望居中的项目的宽度，并且 div 通常占用 100% 的宽度，因此您可能不会感觉到它居中，直到您以 % 或 px 为单位指定宽度。

请参阅此示例。在这个外部 div 有 100% 的宽度，但它的子 div 只有按钮所需的宽度，并且使用 margin: 0 auto 居中。

http://jsfiddle.net/zud8g/

<div style="width:100%">
    <div style="margin:0 auto; width:75px;">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </div>
</div>

【讨论】：

【解决方案3】：

在css中应该是

.clear {
   text-align:center;
}
.clear .button {
   margin:auto;
}

边距：自动；并不总是必要的，但在一些更顽固的情况下会使事情成为中心。表格就是这样一个实例，如果没有 margin:auto; 似乎就无法对齐。还要确保您的 div 宽度大于按钮宽度。

【讨论】：

【解决方案4】：

试试这个。这是水平居中的最简单方法。边距：0 auto，自动检测到现在的中心位置，并将 div 放在页面的中心。

<div style="margin: 0 auto;" class="clear">
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

【讨论】：