Question

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

以下是我的代码：

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

Answer 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感到不舒服，这可能是更好的方法。

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

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>

Answer 4

在css中它应该是

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

保证金：自动;并不总是必要的，但在一些更顽固的案例中，事情是中心的。表是一个这样的实例，似乎没有边距对齐：auto;。还要确保div宽度大于按钮宽度。

如何水平居中对齐按钮？

4 个答案: