Rumah  >  Artikel  >  hujung hadapan web  >  Cara Memusatkan Div Secara Mendatar: Panduan Terperinci

Cara Memusatkan Div Secara Mendatar: Panduan Terperinci

Patricia Arquette
Patricia Arquetteasal
2024-11-01 14:31:29501semak imbas

How to Center Divs Horizontally:  A Detailed Guide

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn