我的 HTML 表单提交按钮在 CSS 中居中时遇到问题。
我现在正在使用：
<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">
使用此 CSS 内容
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
它什么也没做。我知道我可能在做一些愚蠢的错误。我该如何解决这个问题？
【问题讨论】：
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; }
【讨论】：
输入元素默认是内联的。添加display:block 以获取要应用的边距。但是，这会将按钮分成两条单独的行。按照其他人的建议，使用包装 <div> 和 text-align: center 将它们放在同一行。
【讨论】：
我在这里看到了一些答案，其中大多数都很复杂或有一些缺点（由于 display: inline-block，额外的 div、text-align 不起作用）。我认为这是最简单且没有问题的解决方案：
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;
}
【讨论】：
试试这个：
<!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 与单个块一起使用，通过将空白空间分配到左侧和右侧，将它们在父空间中居中。
【讨论】：
/* 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 */
【讨论】：
display: block...永远忘记这一点！
<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 内0自动'：
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>
【讨论】：
如果只有一个按钮需要居中，一个简单的解决方案是：
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
您可以使用类似的样式来处理several buttons。
【讨论】：
如果您想更上一层楼，请使用 flexbox：
.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/
【讨论】：
你可以用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>【讨论】：