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

Cara memusatkan lapisan DIV dengan CSS_CSS/HTML

WBOY
WBOYasal
2016-05-16 12:11:161682semak imbas

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.

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