简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css中margin:0 auto无效的解决办法

黄舟
Lepaskan： 2017-07-21 13:41:34
asal
5008 orang telah melayarinya

css中margin:0 auto无效的解决办法

<div class="div1" style="width:100%; height:60px; float:left; background:#CCC;">
<div class="div2" style="width:auto; height:100%; margin:0 auto; background:#F00;">111111111</div>
</div>
Salin selepas log masuk

div1宽度是屏幕宽度，div2宽度随内容大小而定并居中与div1，但div2的宽度我设成auto后宽度还是div1 100%的宽度，为什么会这样？研究了整晚都没搞懂，希望有高手可以解答？

给div2外面套一个div3，设置div3为水平居中显示，即text-align:center;div2设置为内联元素，即display:inline;这样就可以啦。

1768.jpg

　　div默认为块级元素，块级元素都是独自占一行的，宽度默认为100%的。

在IE8下运行此段代码 没有居中 除了body设置text-align:center 还有其它解决方法吗？

<!doctype html><html>
    <head>
        <style>
            .tcenter{                width:500px;                margin:0 auto;
            }        </style>
    </head>
    <body>
        <div class="tcenter">没有居中。。</div>
    </body></html>
Salin selepas log masuk

亲测IE8居中没问题

1769.png

你要文字居中就设置.tcenter{text-align:center}

margin:0 auto; 是让div居中的，不是让文字居中的。

Atas ialah kandungan terperinci css中margin:0 auto无效的解决办法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
auto css margin
sumber：php.cn
Artikel sebelumnya：css中关于auto属性的使用详解 Artikel seterusnya：css：margin:0 auto在ie8下面不能居中的解决办法
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
Isu terkini
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Pelapik ibu bapa tidak diendahkan oleh anak yang berkedudukan melekit Bagaimana untuk mengelakkan unsur melekit daripada berada di belakang pengepala? Coretan k...
daripada 2024-04-06 11:42:51
0
1
338
Mengapakah kanak-kanak grid dengan lebar tetap dan lebar maksimum 90% melimpahi trek grid? Soalan: Soalan saya sangat mudah, saya ingin tahu mengapa elemen .header melimpahi trek gr...
daripada 2024-04-05 14:33:39
0
1
1426
Bagaimana untuk mengalih keluar ruang di bawah setiap baris pada papan Tic-Tac-Toe dalam Next.js menggunakan CSS? Mengapakah terdapat ruang di bawah setiap baris? (CSS) Saya cuba membuat apl tic-tac-toe N...
daripada 2024-04-05 11:39:02
0
1
1431
Kaedah CSS dan HTML untuk mengalihkan perenggan ke kiri pada skrin bersaiz mudah alih Ia kelihatan sempurna pada skrin komputer biasa 16:9, dengan teks di sebelah kiri dan imej...
daripada 2024-04-04 20:25:22
0
1
330
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！