中心表单提交buttonhtml / css
我遇到麻烦在css中集中我的html表单提交button。
现在我正在使用
<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，使其alignment中心。 那么你不需要button上的任何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; }
input元素默认是内联的。 添加display:block以获取边距。 然而，这将把button分成两行。 按照其他人的build议，使用带有text-align: center的包装<div> 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，或者为此创build一个容器。 - 如果容器必须具有固定大小，则使用
auto左右边距将其居中放置在父容器中。
请注意， auto与单个块一起使用，通过向左和向右分配空白空间将它们居中在父空间中。
我在这里看到一些答案，其中大部分是复杂的或有一些缺点（额外的divs，text-align因为display：inline-block而不起作用）。 我认为这是最简单和无问题的解决scheme：
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; }
假设button应该在同一行上彼此相邻，它们不应该都使用“自动”边距居中，而是放置在具有“0自动”边距的定义宽度的div内。
CSS：
#centerbuttons {width:250px;margin:0 auto;}
HTML（从buttonCSS中删除边距属性后：
<div id="centerbuttons"> <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>
<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
