Rumah > hujung hadapan web > tutorial css > Kaedah yang biasa digunakan untuk pemusatan mendatar halaman web reka letak CSS_Pertukaran pengalaman

Kaedah yang biasa digunakan untuk pemusatan mendatar halaman web reka letak CSS_Pertukaran pengalaman

PHP中文网
Lepaskan: 2016-05-16 12:06:34
asal
1521 orang telah melayarinya

Pemusatan mendatar halaman biasanya menyakitkan kepala, terutamanya untuk orang baru. Ketidakserasian antara penyemak imbas juga boleh menyebabkan masalah besar. Mari kita bincangkan tentang cara biasa untuk memusatkan halaman secara mendatar.
Lihat "Menguasai CSS" untuk kandungan berikut.
Kod HTML:

Kodnya adalah seperti berikut

<body>   
<div id="wrapper">   
</div>   
</body>   
IE居中办法:   
body {   
     text-align:center;   
     min-width:760px;   
}   
#wrapper {   
     width:720px;   
     text-align:left;   
}
Salin selepas log masuk

IE akan tersilap text-align:center to center everything, bukan hanya teks. Kemudian susun semula kandungan bekas ke kiri.

Bukan IE:

Kodnya adalah seperti berikut:

#wrapper {   
     width:720px;   
     margin:0 auto;   
}
Salin selepas log masuk


Bagaimana untuk menjadikannya serasi dengan IE dan bukan IE Seperti berikut:

Kodnya adalah seperti berikut :

#wrapper {   
     width:720px;   
     position:relative;   
     left:50%;   
     margin-left:-360px;   
}
Salin selepas log masuk


Mula-mula letak tepi kiri bekas ke tengah halaman, kemudian gerakkannya separuh lebarnya ke kiri .

Di atas ialah kaedah biasa untuk mendatar mendatar halaman web reka letak CSS_kandungan pertukaran pengalaman Untuk kandungan yang lebih berkaitan, sila perhatikan tapak web PHP Cina (www.php.cn)!


Label berkaitan:
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