如何水平居中对齐按钮？

Question

我正在尝试定制一个预先编写的代码，所以我不是编码专家，需要用外行的术语向我解释这一点。基本上，我正在尝试水平居中对齐订阅按钮。

下面是我的代码：

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

Answer 1

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

例如，按id设置元素的样式：

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

或者使用margin将类为"button“的元素水平居中，没有上边距或下边距：

input.button {
    margin: 0 auto;
}

AleshaOleg的内联风格也可以使用。(如果您对CSS感到不舒服，这可能是更好的方法。

Answer 2

您有许多书面答案，但我想添加更多的东西来实现这一点

自动边距你必须使用“container.

• Your :0”这将使元素居中对齐在其直接的

1. 容器中的元素的宽度应该大于你想要居中的项目的宽度，而container.
2. Your通常是宽度的100%，所以你可能不会感觉到它居中，除非你给它一些宽度，单位是%或px。

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

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>

Answer 3

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

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