中心表单提交按钮 HTML/CSS

小开

最佳答案

Http://jsfiddle.net/sebastianpatanemasuelli/rjxqc/

我只是在它们周围缠了一个 Div 然后让它们对齐在中间。那么你就不需要在按钮上安装任何 css 来使它们居中。

<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>


.buttonHolder{ text-align: center; }

小开

试试这个:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}


#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>

这有2个例子，你可以使用一个最适合你的情况。

在父容器上使用 text-align:center，或者为此创建一个容器。
如果容器必须具有固定的大小，则使用 auto左右边距将其居中放在父容器中。

请注意，auto与单个块一起使用，通过将空白空间分布在左侧和右侧，使它们在父空间中居中。

小开

默认情况下，输入元素是内联的。添加 display:block以获得要应用的页边距。然而，这将把按钮分成两行。按照其他人的建议，使用包装 <div>和 text-align: center，使它们在同一条线上。

小开

我假设这些按钮应该在同一行上彼此挨着，它们不应该使用“ auto”边距居中，而是应该放在一个定义宽度为“0 auto”的 div 中:

CSS:

#centerbuttons{
width:250px;
margin:0 auto;
}

HTML (从按钮的 CSS 中删除边距属性后) :

<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>

小开

<style>
form div {
width: 400px;
border: 1px solid black;
}


form input[type='submit']  {
display: inline-block;
width: 70px;
}


div.submitWrapper  {
text-align: center;
}
</style>
<form>


<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>

再检查一下这个 Jsfiddle

小开

我在这里看到了一些答案，其中大多数比较复杂，或者有一些缺点(额外的 div、文本对齐不起作用，因为 display: inline-block)。我认为这是最简单和没有问题的解决方案:

HTML:

<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>

CSS:

table input[type="submit"] {
display: block;
margin: 0 auto;
}

小开

如果只有一个按钮需要居中，一个简单的解决方案是这样的:

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

虽然我已经使用了一个内联示例，但是对于生产来说，密码应该放在一个使用一个班级的 CSS 文件中。

小开

/* here is what works for me - set up as a class */


.button {
text-align: center;
display: block;
margin: 0 auto;
}


/* you can set padding and width to whatever works best */

小开

你可以用 text-align: center。

.form-1 {
text-align: center;
}
#btn_s {
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}

<div class="form-1">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>

小开

如果你想让它更上一层楼，使用 弹簧箱:

.form {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
gap: 1em;
}
#btn_s {
width: 100px;
}
#btn_i {
width: 125px;
}

<div class="form">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>

软盒指南: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

小开

默认情况下，按钮是 inline-block样式的元素。他们不会回应自动。你必须指出一个具体的数字。

button {
margin: 6px 50px;
}

(我更喜欢百分比，它们似乎效果更好)

在这种情况下，如果它必须响应 margin: auto，则必须将其更改为块元素。

button {
display: block;
margin: 6px auto;
}