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

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

由于

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

Answer 2

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

Answer 3

我在这里看到了一些答案，其中大多数是复杂的或有一些缺点（额外的div，text-align因为display：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;
}

Answer 4

试试这个：

<!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与单个块一起使用，通过左侧和右侧分配空白空间将它们置于父空间中。

Answer 5

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

Answer 6

<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

Answer 7

一个仅需将一个按钮居中的简单解决方案是：

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

您可以使用类似的样式来处理several buttons。

Answer 8

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

中心表单提交按钮html / css

8 个答案: