Cara Memusatkan Div Secara Mendatar: Panduan Terperinci

Penjajaran Div Mendatar: Panduan Terperinci

Apabila cuba memusatkan div secara mendatar, adalah perkara biasa untuk menghadapi masalah penjajaran. Artikel ini akan menangani masalah khusus ini dan menyediakan penyelesaian.

Pernyataan Masalah:

Seperti yang digambarkan dalam coretan kod di bawah, div bekas mempunyai div yang gagal dipusatkan secara mendatar:

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

Selain itu, mungkin terdapat kes apabila div baris mengandungi hanya satu div blok.

Penyelesaian:

Untuk menjajarkan div secara mendatar, pertimbangkan untuk menggunakan paparan: sifat blok sebaris dan bukannya apungan. Pendekatan ini memberikan kawalan yang lebih besar ke atas reka letak div anda dan membantu mereka berpusat secara mendatar dalam bekasnya.

CSS:

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

Kesimpulan:

Dengan memanfaatkan paparan: sifat blok sebaris, anda boleh memusatkan div secara mendatar dengan berkesan dan menyelesaikan isu penjajaran yang diterangkan dalam pernyataan masalah. Penyelesaian yang mudah tetapi berkesan ini boleh meningkatkan reka letak dan daya tarikan estetik halaman web anda.

Atas ialah kandungan terperinci Cara Memusatkan Div Secara Mendatar: Panduan Terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!