Mengapa div saya tidak berpusat secara mendatar dalam div yang mengandungi?

Memusatkan Penjajaran DIV Mendatar

Anda telah menghadapi isu di mana div anda gagal menjajarkan secara mendatar dalam div yang mengandungi. Berikut ialah pertanyaan dan penyelesaian biasa:

Soalan

Mengapa div saya tidak berpusat secara mendatar dalam div yang mengandungi?

Contoh HTML:

<code class="html"><div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div></code>

Contoh CSS:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}</code>

Penyelesaian

Untuk mencapai pemusatan mendatar, pertimbangkan untuk menggunakan paparan: blok sebaris dan bukannya apungan. Kaedah ini membolehkan div berkelakuan seperti elemen sebaris sambil mengekalkan sifat peringkat blok seperti lebar dan tinggi.

CSS yang dikemas kini:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>

Dengan pengubahsuaian ini, div anda harus dijajarkan secara mendatar dalam mengandungi div.

Atas ialah kandungan terperinci Mengapa div saya tidak berpusat secara mendatar dalam div yang mengandungi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!