我在CSS中使用HTML表单提交按钮时遇到了麻烦。
现在我正在使用：
<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，以使它们在同一条线上。
我在这里看到一些答案，其中大多数是复杂的或有一些缺点（额外的div，text-align因为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;
}
试试这个 ：
<!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与单个块一起使用，通过向左和向右分配空白空间将它们居中在父空间中。
<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
我假设按钮应该在同一条线上彼此相邻，它们不应该使用“自动”边距居中，而是放置在具有定义宽度且具有边距'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>
一个简单的解决方案，如果只需要一个按钮居中，就像这样：
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
你可以使用类似的风格来处理several buttons。
/* 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 */