将按钮居中对齐

Question

我有一个简单的提交按钮，我想将其居中对齐。这是我的代码：

<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">

然而，它不能工作。最好/最容易的方法是什么？

- Garry

Answer 1

你应该使用类似以下的代码：

<div style="text-align:center">  
    <input type="submit" />  
</div>  

或者你可以使用类似这样的方法。通过给元素设置宽度，并在左右边距中指定auto，该元素将在其父元素中居中自适应。

<input type="submit" style="width: 300px; margin: 0 auto;" />

- lvil

---

这不是完全正确的。您发布了两种完成任务的不同方法。其中一种是正确的，另一种是错误的。您可以在父级上使用“text-align: center”来实现正确的对齐方式。但是他可能不希望父元素中的所有内容都居中对齐。仅为居中而添加它将浪费标记。将“margin: 0 auto;”添加到此解决方案是不必要的。那是另一种方法。它需要确定提交按钮的“width”。您应该更正您当前的答案，并可能发布第二个解决方案。 - mrtsherman

Answer 2

对我而言，使用flexbox是最清晰的解决方案。

在父级div/元素周围添加一个CSS类：

.parent {
display: flex;
}

对于按钮使用：

.button {
justify-content: center;
}

如果没有父级div，按钮将不知道页面/元素的中心在哪里。

如果这不起作用，请尝试：

#wrapper {
    display:flex;
    justify-content: center;
}

- Royal

Answer 3

这是我用过的方法：

    <input type="submit" style="margin-left: 50%">

如果您只添加边距而没有左侧部分，它将把提交按钮居中到整个页面的中间，使其难以找到，并使没有耐心找到提交按钮的人无法完成表单。 margin-left 可以在同一行内居中，因此它不会比您预期的更向下移动页面。 如果您只想缩进提交按钮而不是将其缩进到页面的一半，还可以使用像素而不是百分比。

- Anna Medyukh

Answer 4

添加 width:100px, margin:50%。 现在按钮的左侧设置为中心。
最后添加按钮宽度的一半，在我们的例子中是50px。
按钮的中心在中心位置。

<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>

- japetko

Answer 5

margin: 50%; 

您可以根据需要调整百分比。在响应式电子邮件中，它似乎对我有效。

- Holly Williford