将按钮与中心对齐

Question

我有一个简单的提交按钮。我想把它与中心对齐。这是我的代码：

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

然而，它不起作用。最好/最简单的方法是什么？

Answer 1

你应该使用这样的东西：

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

或者你可以使用这样的东西。通过为元素指定宽度并为左右边距指定auto，元素将在其父级中居中。

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

Answer 2

这对我有用：

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

如果你只添加保证金而没有左边的部分，它会将提交按钮置于整个页面的中间位置，这样就很难找到并且不适合那些没有耐心的人提交表单。找到提交按钮大声笑。 margin-left将它放在同一行中，因此它不会超出您的预期。 如果您只想稍微缩进提交按钮而不是一直在页面中间，您也可以使用像素而不是百分比。

Answer 3

对我而言，它使用了flexbox，这在我看来是最干净的解决方案。

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

.parent {
display: flex;
}

并使用按钮：

.button {
justify-content: center;
}

你应该使用父div，否则按钮不会知道＆＃39;页面/元素的中间是什么。

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

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

Answer 4

margin: 50%; 

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

Answer 5

添加宽度：100px ，保证金：50％。 现在按钮的左侧设置为中心 最后添加按钮的宽度的一半 50px 。
按钮的中间位于中间。

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