div
在另一個div
內水平居中? </p>
<pre class="brush:html;toolbar:false;"><div id="outer">
<div id="inner">Foo foo</div>
</div>
</pre>
<p><br /></p>P粉0020233262023-08-22 00:52:50
如果您不想在內部的div
上設定固定寬度,可以嘗試以下方法:
#outer { width: 100%; text-align: center; } #inner { display: inline-block; }
<div id="outer"> <div id="inner">Foo foo</div> </div>
這將使內部的div
成為一個可以透過text-align
居中的內聯元素。
P粉6175971732023-08-22 00:02:14
使用flexbox
非常容易將div水平和垂直居中。
#inner { border: 0.05em solid black; } #outer { border: 0.05em solid red; width:100%; display: flex; justify-content: center; }
<div id="outer"> <div id="inner">Foo foo</div> </div>