Beberapa metode untuk memusatkan div secara vertikal

Penulis：Eve Cole Waktu Pembaruan：2025-01-09 10:59:01

Saat membicarakan masalah ini, beberapa orang mungkin bertanya, bukankah ada atribut perataan vertikal di CSS untuk mengatur pemusatan vertikal? Meskipun beberapa browser tidak mendukungnya saya hanya perlu melakukan sedikit CSS

Teknologi peretasan sudah cukup! Jadi saya harus menyampaikan beberapa patah kata di sini. Memang ada atribut vertical-align di CSS, tetapi hanya muncul untuk elemen yang memiliki atribut valign di elemen (X) HTML.

Efektif, seperti <td>, <th>, <caption>, dll. pada elemen tabel seperti <div> dan <span> tidak memiliki fitur valign, sehingga perataan vertikal tidak dapat digunakan pada elemen tersebut.

memengaruhi.

Tutorial terkait: N cara memusatkan div secara horizontal

1. Pemusatan vertikal satu baris

Jika hanya ada satu baris teks dalam sebuah wadah, relatif mudah untuk menempatkannya di tengah. Kita hanya perlu mengatur tinggi sebenarnya agar sama dengan tinggi tinggi baris.

menyukai:

div {
tinggi:25 piksel;
tinggi garis:25px;
meluap: tersembunyi;
}
Kode ini sangat sederhana. Pengaturan overflow:hidden digunakan nanti untuk mencegah konten melebihi wadah atau menyebabkan pembungkusan garis otomatis, sehingga efek pemusatan vertikal tidak dapat dicapai. Lebih Banyak Pengajaran CSS

Prosedur.

2. Pemusatan vertikal beberapa baris teks yang tingginya tidak diketahui

Jika tinggi suatu konten bervariasi, maka kita dapat menggunakan metode terakhir yang digunakan untuk mencapai pemusatan horizontal yang disebutkan di bagian sebelumnya, yaitu mengatur Padding sehingga bagian atas dan bawah

Nilai paddingnya bisa sama. Sekali lagi, ini adalah cara "tampilan" untuk pemusatan vertikal, ini hanya cara membuat teks memenuhi <div> sepenuhnya. Anda dapat menggunakan sesuatu seperti

Kode berikut:

div {
bantalan:25 piksel;
}
Keuntungan dari metode ini adalah dapat dijalankan di browser apa pun, dan kodenya sangat sederhana, namun prasyarat penerapan metode ini adalah ketinggian container harus dapat diskalakan.

</tubuh>
</html>
3. Memusatkan teks multi-baris dengan ketinggian tetap

Di awal artikel ini sudah kami sampaikan bahwa atribut vertical-align di CSS hanya akan berfungsi pada tag (X)HTML dengan atribut valign, namun ada juga tampilannya di CSS

Atribut tersebut dapat mensimulasikan <table>, sehingga kita dapat menggunakan atribut ini untuk membuat <div> mensimulasikan <table> dan menggunakan perataan vertikal. Perhatikan bahwa tampilan:tabel dan

Cara menggunakan display:table-cell, yang pertama harus diset pada elemen induk, dan yang kedua harus diset pada elemen anak, jadi kita perlu menambahkan elemen <div> lain untuk teks yang perlu diposisikan:

div#bungkus {
tinggi:400px;
tampilan:meja;
}
div#konten {
perataan vertikal:tengah;
tampilan: sel tabel;
batas:1 piksel padat #FF0099;
warna latar:#FFCCFF;
lebar:760 piksel;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<title> Teks multi-baris berada di tengah vertikal</title>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<gaya tipe="teks/css">
badan {ukuran font:12px;font-keluarga:tahoma;}
div#bungkus {
tinggi:400px;
tampilan:meja;
}
div#konten {
perataan vertikal:tengah;
tampilan: sel tabel;
batas:1 piksel padat #FF0099;
warna latar belakang:#FFCCFF;
lebar:760 piksel;
}
</gaya>
</kepala>
<tubuh>
<div id="bungkus">
<div id="content"><pre>Sekarang kita ingin memusatkan teks ini secara vertikal! Webjx.Com
div#bungkus {
tinggi:400px;
tampilan:meja;
}
div#konten {
perataan vertikal:tengah;
tampilan: sel tabel;
batas:1 piksel padat #FF0099;
warna latar:#FFCCFF;
lebar:760 piksel;
}
</pre></div>
</div>
</tubuh>
</html>
Metode ini ideal, namun sayangnya Internet Explorer 6 tidak memahami dengan benar tampilan:tabel dan tampilan:sel-tabel, sehingga metode ini digunakan dalam

Ini tidak valid di Internet Explorer 6 dan yang lebih lama. Ya, itu menyedihkan! Namun, kami memiliki metode lain. 4. Solusi di Internet Explorer

Di Internet Explorer 6 dan yang lebih lama, terdapat kesalahan dalam perhitungan ketinggian. Setelah memposisikan elemen induk di Internet Explorer 6, kemudian Anda memposisikan elemen anak

Saat melakukan perhitungan persentase, dasar perhitungannya seolah-olah diwariskan (jika nilai yang diposisikan adalah nilai absolut tidak ada masalah, tetapi dasar perhitungan yang menggunakan persentase tidak lagi menjadi elemennya)

tinggi, sedangkan tinggi posisi diwarisi dari elemen induk). Misalnya, kami memiliki cuplikan kode HTML (X) berikut:

<div id="bungkus">
<div id="subbungkus">
<div id="konten">
</div>
</div>
</div>
Jika kita melakukan pemosisian absolut pada subwrap, maka konten juga akan mewarisi atribut ini. Meskipun tidak akan langsung ditampilkan di halaman jika konten diposisikan lebih jauh

Ketika baris diposisikan relatif satu sama lain, rasio 100% yang Anda gunakan tidak lagi menjadi tinggi asli konten. Misalnya kita atur posisi subwrap menjadi 40%, jika kita ingin membuat kontennya

Jika tepinya tumpang tindih dengan bungkus, top:-80% harus disetel; lalu, jika kita menyetel top:50% subwrap, kita harus menggunakan 100% untuk mengembalikan konten ke posisi semula.

, tapi bagaimana jika kita juga mengatur kontennya menjadi 50%? Kemudian letaknya persis di tengah secara vertikal. Jadi kita bisa menggunakan metode ini untuk mencapai pemusatan vertikal di Internet Explorer 6:

div#bungkus {
batas:1 piksel padat #FF0099;
warna latar belakang:#FFCCFF;
lebar:760 piksel;
tinggi:400 piksel;
posisi:relatif;
}
div#subwrap {
posisi:mutlak;
batas:1 piksel padat #000;
atas:50%;
}
div#konten {
batas:1 piksel padat #000;
posisi:relatif;
teratas: -50%;
}
Tentu saja, kode ini hanya akan berfungsi di browser dengan masalah komputasi seperti Internet Exlorer 6. (Tetapi saya tidak mengerti. Saya memeriksa banyak artikel dan saya tidak tahu apakah itu karena

Apakah sama atau karena alasan tertentu? Sepertinya banyak orang yang enggan menjelaskan prinsip bug ini di Internet Explorer 6. Saya hanya memiliki pemahaman yang dangkal dan perlu mempelajarinya lebih lanjut)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<title> Teks multi-baris berada di tengah vertikal</title>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<gaya tipe="teks/css">
badan {ukuran font:12px;font-keluarga:tahoma;}
div#bungkus {
batas:1 piksel padat #FF0099;
warna latar belakang:#FFCCFF;
lebar:760 piksel;
tinggi:400 piksel;
posisi:relatif;
}
div#subwrap {
posisi:mutlak;
atas:50%;
}
div#konten {
posisi:relatif;
teratas: -50%;
}
</gaya>
</kepala>
<tubuh>
<div id="bungkus">
<div id="subbungkus">
<div id="content"><pre>Sekarang kita ingin memusatkan teks ini secara vertikal!
div#bungkus {
batas:1 piksel padat #FF0099;
warna latar:#FFCCFF;
lebar:760 piksel;
tinggi:500px;
posisi:relatif;
}
div#subwrap {
posisi:mutlak;
batas:1 piksel padat #000;
atas:50%;
}
div#konten {
batas:1 piksel padat #000;
posisi:relatif;
teratas: -50%;
}</pre>
</div>
</div>
</div>
</tubuh>
</html>
5. Solusi sempurna

Maka kita bisa mendapatkan solusi sempurna dengan menggabungkan dua metode di atas, tapi ini memerlukan pengetahuan tentang hack CSS. Untuk menggunakan CSS Hack untuk membedakan browser, Anda bisa

Silakan lihat "Peretasan CSS Sederhana: Bedakan IE6, IE7, IE8, Firefox, Opera":

div#bungkus {
tampilan:meja;
batas:1 piksel padat #FF0099;
warna latar:#FFCCFF;
lebar:760 piksel;
tinggi:400px;
_posisi:relatif;
meluap: tersembunyi;
}
div#subwrap {
perataan vertikal:tengah;
tampilan: sel tabel;
_posisi:mutlak;
_atas:50%;
}
div#konten {
_posisi:relatif;
_atas:-50%;
}
Pada titik ini, solusi pemusatan yang sempurna tercipta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<title> Teks multi-baris berada di tengah vertikal</title>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<gaya tipe="teks/css">
badan {ukuran font:12px;font-keluarga:tahoma;}
div#bungkus {
tampilan:meja;
batas:1 piksel padat #FF0099;
warna latar:#FFCCFF;
lebar:760 piksel;
tinggi:400 piksel;
_posisi:relatif;
meluap:tersembunyi;
}
div#subwrap {
perataan vertikal:tengah;
tampilan: sel tabel;
_posisi:mutlak;
_atas:50%;
}
div#konten {
_posisi:relatif;
_atas:-50%;
}
</gaya>
</kepala>
<tubuh>
<div id="bungkus">
<div id="subbungkus">
<div id="content"><pre>Sekarang kita ingin memusatkan teks ini secara vertikal!
div#bungkus {
batas:1 piksel padat #FF0099;
warna latar belakang:#FFCCFF;
lebar:760 piksel;
tinggi:500 piksel;
posisi:relatif;
}
div#subwrap {
posisi:mutlak;
batas:1 piksel padat #000;
atas:50%;
}
div#konten {
batas:1 piksel padat #000;
posisi:relatif;
teratas: -50%;
}</pre>
</div>
</div>
</div>
</tubuh>
</html>
ps Nilai vertical centering vertical-align adalah tengah, sedangkan nilai horizontal centering adalah center. Walaupun sama-sama terpusat, namun kata kuncinya berbeda.