Mengapakah `margin: auto;` Pusatkan Elemen Sekat Sebaris Secara Mendatar?

margin:auto; dalam Elemen Blok Sebaris

Apabila menggunakan margin:auto; ke div dengan paparan blok sebaris, ia mungkin tidak memusatkan div secara mendatar seperti yang dijangkakan. Ini berlaku kerana elemen blok sebaris berkelakuan seperti elemen sebaris, mengalir di sepanjang halaman.

Dalam kod yang disediakan:

Kod Lama (Berfungsi)

<code class="css">#container {
  width: 200px;
  ...
}</code>

Div diberi lebar tertentu, memastikan ia muat dalam bekas induknya.

Kod Baharu (Tidak Berfungsi)

<code class="css">#container {
  display: inline-block;
  ...
}</code>

Tetapan paparan: inline-block membenarkan div mengecut dan berkembang bergantung pada kandungannya, yang membawa kepada penjajaran yang tidak betul.

Untuk memusatkan div, kod memerlukan:

Penyelesaian

1. Tambah penjajaran teks: tengah; kepada elemen yang mengandungi (.pusat dalam contoh).

<code class="css">.center {
  text-align: center;
}</code>

Ini memastikan bahawa div blok sebaris dipusatkan.

<code class="html"><div class="center">
  <div class="MtopBig" id="container">...</div>
</div></code>

Atas ialah kandungan terperinci Mengapakah `margin: auto;` Pusatkan Elemen Sekat Sebaris Secara Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!