Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa div saya tidak berpusat secara mendatar dalam div yang mengandungi?

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

Linda Hamilton
Linda Hamiltonasal
2024-11-02 17:44:29447semak imbas

Why do my divs not center horizontally within the containing div?

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!

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