Mencapai penjajaran tengah mendatar elemen

Question

<p>Bagaimana hendak memusatkan div在另一个div secara mendatar menggunakan CSS? </p> <pre class="brush:html;toolbar:false;"><div id="outer"> <div id="inner">Foo foo</div> </div> </pra> <p><br /></p>

Answer 1

Jika anda tidak mahu menetapkan lebar tetap pada bahagian dalam div, anda boleh mencuba ini:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Ini akan menjadikan bahagian dalam div成为一个可以通过text-align elemen sebaris yang boleh dipusatkan melalui text-align.

Answer 2

Sangat mudah untuk memusatkan div secara mendatar dan menegak menggunakan flexbox.

#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>