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 garis.
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.
<!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> Memusatkan satu baris teks secara 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 {
tinggi:25 piksel;
tinggi garis:25px;
batas:1 piksel padat #FF0099;
warna latar:#FFCCFF;
}
</gaya>
</kepala>
<tubuh>
<div>Sekarang kita ingin memusatkan teks ini secara vertikal! </div>
</tubuh>
</html>
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 "mencari" pemusatan vertikal, ini hanya cara membuat teks memenuhi <div> sepenuhnya. Anda dapat menggunakan sesuatu seperti
Kode berikut:
div {
bantalan:25 piksel;
}
Keuntungan metode ini adalah dapat dijalankan di browser apa pun dan kodenya sangat sederhana, namun prasyarat metode ini adalah ketinggian container harus dapat diskalakan.
<!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 {
bantalan:25 piksel;
batas:1 piksel padat #FF0099;
warna latar:#FFCCFF;
lebar:760 piksel;
}
</gaya>
</kepala>
<tubuh>
<div><pre>Sekarang kita ingin memusatkan teks ini secara vertikal!
div {
bantalan:25 piksel;
batas:1 piksel padat #FF0099;
warna latar belakang:#FFCCFF;
}
</pre></div>
</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 disetel pada elemen induk, dan yang terakhir harus disetel pada elemen turunan, jadi kita perlu menambahkan elemen <div> lain untuk teks yang perlu diposisikan:
div#bungkus {
tinggi:400 piksel;
tampilan:meja;
}
div#konten {
perataan vertikal:tengah;
tampilan: sel tabel;
batas:1 piksel padat #FF0099;
warna latar belakang:#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:400 piksel;
tampilan:meja;
}
div#konten {
perataan vertikal:tengah;
tampilan: sel tabel;
batas:1 piksel padat #FF0099;
warna latar:#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:400 piksel;
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 penghitungan persentase, dasar penghitungannya seolah-olah diwariskan (jika nilai yang diposisikan adalah nilai absolut, tidak ada masalah, tetapi dasar penghitungan persentase tidak lagi menjadi elemen)
height alih-alih tinggi posisi yang 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 menyetel konten menjadi 50%? Kemudian letaknya tepat 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:#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 Exlporer 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:#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: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>
5. Solusi sempurna
Maka kita bisa mendapatkan solusi sempurna dengan menggabungkan dua metode di atas, namun ini memerlukan pengetahuan tentang hack CSS. Untuk menggunakan CSS Hack untuk membedakan browser, Anda bisa
Silakan merujuk ke artikel ini "Peretasan CSS Sederhana: Membedakan antara IE6, IE7, IE8, Firefox, dan Opera":
div#bungkus {
tampilan:meja;
batas:1 piksel padat #FF0099;
warna latar belakang:#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%;
}
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 middle, sedangkan nilai horizontal centering align adalah center.