中心表单提交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

  • 如何在我的网站的网站标签旁边创build小图标?
  • 如何为网页上的文字绘制animation?
  • CSS:变换:翻译(-50%,-50%)使文本模糊
  • 是否有可能使用文本溢出:省略号多行文字?
  • Bootstrap – 当屏幕尺寸较小时删除填充或边距
  • 如何使用ng-click从数组中删除项目或对象?
  • css身高差距:100%vs身高:自动
  • 使div 100%的浏览器窗口的高度
  • Javascript中的相对path在外部文件中
  • 标题消息就像在堆栈溢出
  • HTML中的<script>标签位置是否会影响网页的性能?