Rumah  >  Artikel  >  hujung hadapan web  >  Mengapakah `margin: auto;` Pusatkan Elemen Sekat Sebaris?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-25 11:01:30180semak imbas

Why Doesn't `margin: auto;` Center Inline-Block Elements?

margin:auto; Tidak Berfungsi pada Elemen Sekat Sebaris

Elemen blok sebaris berkelakuan berbeza daripada elemen sekatan apabila ia berkaitan dengan auto jidar. Dalam elemen blok, margin:auto; memusatkan elemen secara mendatar dalam bekas induknya. Walau bagaimanapun, dalam elemen blok sebaris, margin:auto; tidak mempunyai kesan.

Contoh:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}</code>

Dalam contoh ini, elemen bekas ditetapkan sebagai blok sebaris. Apabila margin:auto; digunakan pada elemen, ia tidak memusatkan bekas dalam bekas induknya.

Penyelesaian:

Untuk memusatkan elemen blok sebaris, anda boleh menggunakan teks- jajar: tengah pada elemen induk.

<code class="css">.center {
    text-align: center;
}</code>
<code class="html"><div class="center">
    <div class="MtopBig" id="container"></div>
</div></code>

Kini, elemen bekas akan dipusatkan secara mendatar dalam div tengah.

Atas ialah kandungan terperinci Mengapakah `margin: auto;` Pusatkan Elemen Sekat Sebaris?. 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