中心表单提交按钮HTML / CSS

Question 1

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

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

Question 2

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

Question 3

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

Question 4

我在这里看到了一些答案，其中大多数都很复杂或有一些缺点（其他div，文本对齐由于显示而无法使用：内联块）。我认为这是最简单且没有问题的解决方案：

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

Question 5

尝试这个：

<!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与单个块一起使用时，可以通过向左和向右分配空白空间来使它们在父空间中居中。

Question 6

/* 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 */

Question 7

<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

Question 8

我假设按钮应该在同一行上彼此相邻，因此不应将每个按钮都使用'auto'边距居中，而应将其放置在div内，且宽度应定义为宽度为'0 auto' ：

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>

Question 9

如果只需要一个按钮居中的一种简单解决方案是：

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

您可以使用类似的样式来处理多个按钮。