中心表单提交按钮html/css

我遇到了麻烦，我的HTML表单提交按钮在CSS中。中心表单提交按钮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; 
}

而且它没有做任何事情，我知道我可能做一些愚蠢的错误，任何人都可以帮我吗？

感谢

来源

2010-11-19 Belgin Fish

101

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; }

来源

2010-11-19 01:14:59

实际上，这种解决方案的缺点是，持有人DIV中心*一切*它，包括文本，儿童和儿童......所以通常最好在单个元素上使用'margin：0 auto'，当我们不希望整个容器居中时，并且正如您指出的那样，您可以通过块元素。尽管如此，偶尔我会使用这样的居中，所以它对我来说是-0，因为你没有错...... – vaxquis 2014-04-26 21:07:36

当我用它作为CSS样式的按钮链接时，完美地适用于我。用div和class包装，它应该完美地工作而不会影响不同的类。 – masmrdrr 2015-06-18 09:31:13

非常感谢你，简单但是很有魅力。 – 2015-11-26 08:22:34

试试这个：

<!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>

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

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

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

来源

2010-11-19 01:19:31 SuperDuck

输入元素默认为内联。添加display:block以获得应用边距。但是，这会将按钮分成两行。按照其他人的建议，使用包装<div>与text-align: center以使它们在同一行上。

来源

2010-11-19 01:31:28 Tom

我假设按钮应该在同一行上彼此相邻，它们不应该都使用“自动”边距居中，而是放置在具有限定宽度的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>

来源

2010-11-19 01:33:09 Annie

<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

来源

2014-02-17 23:16:55 kta

我在这里看到了几个答案，其中大多数是复杂或有一些缺点（额外的div，文本对齐不会因为显示的工作：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; 
}

来源

2017-04-19 16:43:39

绝对认同你，这是最好的解决方案，谢谢！ +1 – stepik21 2017-08-12 14:25:12

中心表单提交按钮html/css

回答

相关问题