blocks|key|872227|text|http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|872228|我只是在它们周围添加了一个div，并使其居中对齐。这样你就不需要在按钮上放置任何css了。|872229|<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;+}|code-block|syntax|javascript|872230|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<p><a href="http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/" rel="noreferrer">http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/</a></p>

<p>i just wrapped a div around them and made it align center. then you don't need any css on the buttons to center them.</p>

<pre><code>&lt;div class="buttonHolder"&gt;
  &lt;input value="Search" title="Search" type="submit" id="btn_s"&gt; 
  &lt;input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"&gt;
&lt;/div&gt;

.buttonHolder{ text-align: center; }
</code></pre>


blocks|key|1087047|text|默认情况下，输入元素是内联的。添加display:block以获取要应用的边距。然而，这将把按钮分成两行。按照其他人的建议，使用带有text-align:+center的包装<div>将它们放在同一行上。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1087048|entityMap^0|H|D|1U|I|2F|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Input elements are inline by default. Add <code>display:block</code> to get the margins to apply. This will, however, break the buttons onto two separate lines. Use a wrapping <code>&lt;div&gt;</code> with <code>text-align: center</code> as suggested by others to get them on the same line.</p>


blocks|key|1087165|text|我在这里看到了一些答案，大多数都很复杂，或者有一些缺点(额外的div，文本对齐由于display:+inline-block而不起作用)。我认为这是最简单和没有问题的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1087166|HTML：|1087167|<table>
++++
++++<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>|code-block|syntax|javascript|1087168|CSS：|1087169|table+input[type="submit"]+{
++++display:+block;
++++margin:+0+auto;
}|1087170|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I see a few answers here, most of them complicated or with some cons (additional divs, text-align doesn't work because of display: inline-block). I think this is the simplest and problem-free solution:</p>

<p>HTML:</p>

<pre><code>&lt;table&gt;
    &lt;!-- Rows --&gt;
    &lt;tr&gt;
        &lt;td&gt;E-MAIL&lt;/td&gt;
        &lt;td&gt;&lt;input name="email" type="email" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="submit" value="Register!" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>CSS:</p>

<pre><code>table input[type="submit"] {
    display: block;
    margin: 0 auto;
}
</code></pre>


blocks|key|1087227|text|/*+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+*/|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1087228|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|872361|text|我假设按钮应该在同一行上相邻，它们不应该使用'auto‘页边距居中，而应该放在具有定义宽度的div中，该div的页边距为'0+auto'：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|872362|CSS：|872363|#centerbuttons{
+++width:250px;+
+++margin:0+auto;
}+++++++|code-block|syntax|javascript|872364|HTML+(从按钮的CSS中删除边距属性后)：|872365|<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>|872366|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':</p>

<p>CSS:</p>

<pre><code>#centerbuttons{
   width:250px; 
   margin:0 auto;
}       
</code></pre>

<p>HTML (after removing the margin properties from your buttons' CSS):</p>

<pre><code>&lt;div id="centerbuttons"&gt;
     &lt;input value="Search" title="Search" type="submit"&gt; 
     &lt;input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit"&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1087114|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1087115|还要检查此jsfiddle|unstyled|offset|length|1087116|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kaziSyd/V63nB/13/^0|0|5|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>&lt;style&gt;
form div {
    width: 400px;   
    border: 1px solid black;
} 

form input[type='submit']  {
    display: inline-block;
    width: 70px;
}

div.submitWrapper  {
   text-align: center;    
}    
&lt;/style&gt;
&lt;form&gt;

&lt;div class='submitWrapper'&gt;    
&lt;input type='submit' name='submit' value='Submit'&gt; 
 &lt;/div&gt;
</code></pre>

<p>    </p>

<p>Also Check this <a href="http://jsfiddle.net/kaziSyd/V63nB/13/" rel="nofollow">jsfiddle</a></p>


blocks|key|872449|text|如果只有一个按钮需要居中，一个简单的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|872450|<input+type='submit'+style='display:flex;+justify-content:center;'+value='Submit'>|code-block|syntax|javascript|872451|您可以使用类似的样式来处理several+buttons。|offset|length|872452|entityMap|0|LINK|mutability|MUTABLE|url|https://www.addtoany.com/buttons/customize/center_align_buttons^0|0|0|D|F|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>One simple solution if only one button needs to be centered is something like:</p>

<pre><code>&lt;input type='submit' style='display:flex; justify-content:center;' value='Submit'&gt;
</code></pre>

<p>You can use a similar style to handle <a href="https://www.addtoany.com/buttons/customize/center_align_buttons" rel="nofollow noreferrer">several buttons</a>.</p>


blocks|key|872482|text|你可以用text-align:+center做到这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|872483|​|872484|.form-1+{
++text-align:+center;
}
#btn_s+{
++width:+100px;
++margin-left:+auto;
++margin-right:+auto;
}
#btn_i+{
++width:+125px;
++margin-left:+auto;
++margin-right:+auto;
}|code-block|syntax|javascript|872485|<div+class="form-1">
++<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>|872486|872487|entityMap^0|4|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>You can do it with <code>text-align: center</code>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.form-1 {
  text-align: center;
}
#btn_s {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
#btn_i {
  width: 125px;
  margin-left: auto;
  margin-right: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-1"&gt;
  &lt;input value="Search" title="Search" type="submit" id="btn_s"&gt;
  &lt;input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm having troubles centering my HTML form submit buttons in CSS.</p>

<p>Right now I'm using:</p>

<pre><code>    &lt;input value="Search" title="Search" type="submit" id="btn_s"&gt;
    &lt;input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"&gt;
</code></pre>

<p>with this CSS content</p>

<pre><code>#btn_s{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

#btn_i {
    width: 125px;
    margin-left: auto;
    margin-right: auto;
}
</code></pre>

<p>And it's not doing anything. I know I'm probably doing something stupid wrong. How can I fix this?</p>


Center form submit buttons 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"

问居中表单提交按钮HTML / CSS
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问居中表单提交按钮HTML / CSSEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问居中表单提交按钮HTML / CSS
EN