blocks|key|553903|text|由于提供的细节有限，我将假定最简单的情况，并说您可以使用text-align:+center|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|553904|http://jsfiddle.net/pMxty/|553905|entityMap|0|LINK|mutability|MUTABLE|url^0|S|I|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>With the limited detail provided, I will assume the most simple situation and say you can use <code>text-align: center</code>:</p>

<p><a href="http://jsfiddle.net/pMxty/">http://jsfiddle.net/pMxty/</a></p>


blocks|key|553935|text|假设div是#div，button是#button：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|553936|#div+{
++++display:+table-cell;
++++width:+100%25;
++++height:+100%25;
++++text-align:+center;
++++vertical-align:+center;
}

#button+{}|code-block|syntax|javascript|553937|然后像往常一样将按钮嵌套到div中。|553938|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Supposing div is #div and button is #button: <br/></p>

<pre><code>#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}
</code></pre>

<p>Then nest the button into div as usual.</p>


blocks|key|553992|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|553993|​|553994|<div+style="text-align:+center;+border:+1px+solid">
++<input+type="button"+value="button">
</div>|code-block|syntax|javascript|553995|553996|或者你可以这样做：|553997|553998|<div+style="border:+1px+solid">
++<input+type="button"+value="button"+style="display:+block;+margin:+0+auto;">
</div>|553999|554000|第一个将居中对齐div中的所有内容。另一个只会居中对齐按钮。|554001|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

<p>You could just make:</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-html lang-html prettyprint-override"><code>&lt;div style="text-align: center; border: 1px solid"&gt;
  &lt;input type="button" value="button"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Or you could do it like this instead:</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-html lang-html prettyprint-override"><code>&lt;div style="border: 1px solid"&gt;
  &lt;input type="button" value="button" style="display: block; margin: 0 auto;"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The first one will center align everything inside the div. The other one will center align just the button.</p>


blocks|key|770645|text|最简单的事情是输入一个"div“，给它一个”空格:0自动“，但是如果你想让它居中，你需要给它一个宽度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770646|++Div{
+++Margin:+0+auto+;
+++Width:+100px+;
++}|code-block|syntax|javascript|770647|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Easiest thing is input it as a "div" give it a "margin:0 auto " but if you want it to be centered u need to give it a width </p>

<pre><code>  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }
</code></pre>


blocks|key|770685|text|使用flexbox|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770686|.Center+{
++display:+flex;
++align-items:+center;
++justify-content:+center;
}|code-block|syntax|javascript|770687|然后将类添加到您的按钮。|770688|<button+class="Center">Demo</button>+|770689|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Using flexbox</p>

<pre><code>.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</code></pre>

<p>And then adding the class to your button.</p>

<pre><code>&lt;button class="Center"&gt;Demo&lt;/button&gt; 
</code></pre>


blocks|key|554132|text|在div中将按钮居中的响应式方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|554133|<div+
++++style="display:+flex;
++++align-items:+center;
++++justify-content:+center;
++++margin-bottom:+2rem;">
++++<button+type="button"+style="height:+10%25;+width:+20%25;">hello</button>
</div>|code-block|syntax|javascript|554134|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Responsive way to center your button in a div:</p>

<pre><code>&lt;div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;"&gt;
    &lt;button type="button" style="height: 10%; width: 20%;"&gt;hello&lt;/button&gt;
&lt;/div&gt;
</code></pre>


blocks|key|554222|text|适用于大多数情况的超级简单的答案是，只需将边距设置为0+auto，并将显示设置为block。您可以看到我在CodePen上的演示中是如何将按钮居中的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|554223|​|554224|📷|atomic|554225|554226|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/JGallardo/pen/bjNmNM|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/22fd857101c26c81f8286776c2730af9.png|imageAlt^0|Q|6|14|5|1H|7|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|K|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|U|P|V|E|$W|X|Y|-4]]]]

<p>Super simple answer that will apply to most cases is to just make set the margin to <code>0 auto</code> and set the display to <code>block</code>. You can see how I centered my button in my demo on <a href="https://codepen.io/JGallardo/pen/bjNmNM" rel="nofollow noreferrer">CodePen</a></p>

<p><a href="https://i.stack.imgur.com/n8CTN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n8CTN.png" alt="enter image description here"></a></p>


blocks|key|554272|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|554273|div+{
++++text-align+:+center;
}
button+{
++++width:+50%25;
++++margin:+1rem+auto;
}|code-block|syntax|javascript|554274|<div+style="width:100%25;+height:100%25;+border:+1px+solid">
++<button+type="button">hello</button>
</div>|554275|554276|这就是我主要做的事情。|554277|我认为bootstrap在"mx-auto“中也使用了这个。|554278|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<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>div {
    text-align : center;
}
button {
    width: 50%;
    margin: 1rem auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:100%; height:100%; border: 1px solid"&gt;
  &lt;button type="button"&gt;hello&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>This is what I mostly do.  <br>
I think bootstrap also uses this in &quot;mx-auto&quot;.</p>


blocks|key|554325|text|最简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|554326|<div+style="width:100%25;+height:100%25;+border:+1px+solid">
++++<button+type="button"+style="margin-left:+50%25;">hello</button>
++</div>|code-block|syntax|javascript|554327|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Easiest way :</p>
<pre><code>&lt;div style=&quot;width:100%; height:100%; border: 1px solid&quot;&gt;
    &lt;button type=&quot;button&quot; style=&quot;margin-left: 50%;&quot;&gt;hello&lt;/button&gt;
  &lt;/div&gt;
</code></pre>


<p>I have a div that's width is 100%.</p>

<p>I'd like to center a button within it, how might I do this?</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-html lang-html prettyprint-override"><code>&lt;div style="width:100%; height:100%; border: 1px solid"&gt;
  &lt;button type="button"&gt;hello&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


How to center a button within a div?

我有一个宽度为100%的div。我想把一个按钮放在中间，该怎么做呢？​<div style="width:100%; height:100%; border: 1px solid">  <button type="button">hello</button></div>​

问如何在div中居中按钮？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中居中按钮？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中居中按钮？
EN