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

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

Mary-Kate Olsen
Lepaskan: 2024-10-25 11:01:30
asal
314 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk
<code class="html"><div class="center">
    <div class="MtopBig" id="container"></div>
</div></code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan