中心表单提交按钮 HTML / CSS

Question

我无法在 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;
}

它什么也没做。我知道我可能在做一些愚蠢的错误。我怎样才能解决这个问题？

原文由 Belgin Fish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Sebastian Patane Masuelli 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

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

原文由 Tom 发布，翻译遵循 CC BY-SA 2.5 许可协议