Rumah > hujung hadapan web > tutorial css > Cara memusatkan lapisan DIV dengan CSS_CSS/HTML

Cara memusatkan lapisan DIV dengan CSS_CSS/HTML

WBOY
Lepaskan: 2016-05-16 12:11:16
asal
1699 orang telah melayarinya

Cara memusatkan DIV
Takrif gaya utama adalah seperti berikut:

badan {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
Tentukan dahulu TEXT-ALIGN: tengah dalam elemen induk; ini bermakna kandungan dalam elemen induk dipusatkan untuk IE, tetapan ini sudah memadai. Tetapi ia tidak boleh dipusatkan di mozilla. Penyelesaiannya ialah menambah "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" apabila menetapkan definisi elemen anak

Perlu diambil perhatian bahawa jika anda ingin menggunakan kaedah ini untuk memusatkan keseluruhan halaman, adalah disyorkan untuk tidak meletakkannya dalam DIV Anda boleh memisahkan berbilang div dalam urutan, asalkan anda menentukan MARGIN-RIGHT masuk setiap split div : auto;MARGIN-LEFT: auto;

Cara untuk memusatkan imej secara menegak dalam DIV

Gunakan kaedah latar belakang. Contoh:


badan{LATAR BELAKANG: url(

http://www.w3cn.org/style/001/logo_w3cn_194x79.gif

) #FFF tiada ulangan pusat;} Kuncinya ialah pusat terakhir , Parameter ini mentakrifkan kedudukan imej. Anda juga boleh menulis "kiri atas" (sudut kiri atas) atau "kanan bawah", dll. Anda juga boleh terus menulis nilai "50 30"
Kesannya adalah seperti berikut:

Cara untuk memusatkan teks secara menegak dalam DIV

Jika ia adalah teks, anda tidak boleh menggunakan kaedah latar belakang Anda boleh menggunakan kaedah menambah jarak baris untuk mencapai pemusatan menegak Kod lengkap adalah seperti berikut 🎜>


badan{TEKS-JARINGAN: tengah;}
#pusat{ MARGIN-RIGHT: auto;
MARGIN- KIRI: auto;
tinggi:200px;
latar belakang:#F00;
lebar:400px;
vertical-align:middle;
line-height:200px;
}



kandungan ujian




vertical-align:middle; bermaksud pemusatan menegak dalam garisan Kami menambah jarak baris ke ketinggian yang sama dengan ketinggian baris DIV: 200px dan kemudian memasukkan teks dan ia akan dipusatkan secara menegak.

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan