Mengapa `margin: auto;` tidak berfungsi pada Elemen Sekatan Sebaris?

margin:auto; Tidak Berfungsi pada Elemen Sekat Sebaris

Dalam CSS, margin:auto; biasanya digunakan untuk melintang memusatkan elemen blok pada halaman. Walau bagaimanapun, apabila digunakan pada elemen blok sebaris, sifat ini menjadi tidak berkesan.

Elemen blok sebaris mengalir ke dalam sebaris halaman seperti elemen sebaris tetapi boleh mempunyai lebar dan ketinggian tertentu. Tingkah laku ini menimbulkan kesukaran apabila cuba memusatkannya secara mendatar menggunakan margin:auto;.

Kod Lama:

<code class="css">#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</code>

Dalam kod ini, elemen #container mempunyai lebar tertentu dan mencetuskan gelagat pemusatan yang dijangkakan.

Kod Baharu:

<code class="css">#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}</code>

Menukar sifat paparan #bekas kepada sekatan sebaris mengubah cara ia berinteraksi dengan jidar. Elemen blok sebaris tidak berfungsi sebagai elemen blok dan kehilangan keupayaan untuk dipusatkan menggunakan margin:auto;.

Penyelesaian:

Untuk memusatkan elemen blok sebaris secara mendatar, gunakan sifat penjajaran teks: tengah pada elemen yang mengandunginya sebaliknya:

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

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

Ini akan menjajarkan elemen blok sebaris ke tengah elemen blok yang mengandunginya.

Atas ialah kandungan terperinci Mengapa `margin: auto;` tidak berfungsi pada Elemen Sekatan Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!