Artikel Pengenalan Wulin.com (www.vevb.com): Cara memusatkan gambar secara vertikal.
Lebar dan tinggi gambar tidak diketahui, dan tidak ada ukuran tetap. Di bawah premis ini, cukup merepotkan untuk membuat gambar berpusat secara vertikal dalam wadah dengan lebar dan tinggi tetap. Karena proyek terbaru dapat menggunakan solusi ini, saya telah mengumpulkan dan memilah beberapa metode yang umum digunakan.
Angka berikut adalah rendering yang ideal. Lebar dan tinggi wadah eksternal diperbaiki, dan lebar dan tinggi gambar di tengah tidak diketahui, tetapi gambar harus selalu berpusat secara vertikal relatif terhadap wadah eksternal.
Namun, efek yang diimplementasikan dalam kenyataan tidak sempurna. Karena penguraian masing-masing browser berbeda, setiap browser akan memiliki penyimpangan 1px-3px.
Metode 1 (XHTML 1.0 Transisi):
Metode ini adalah untuk mengatur mode tampilan dari wadah eksternal untuk ditampilkan: tabel, sarang tag rentang di luar tag IMG, dan atur mode tampilan rentang untuk ditampilkan: sel meja, sehingga vertikal-align dapat dengan mudah diselaraskan seperti elemen tabel. Tentu saja, ini hanya di browser standar, IE6/IE7 juga perlu menggunakan penentuan posisi.
Bagian Struktur HTML:
<Div id = box>
<span> <img src = gambar/demo.jpg alt => </span>
</div>
Bagian Gaya CSS:
<Tipe Gaya = Teks/CSS>
#kotak{
Lebar: 500px; Tinggi: 400px;
Tampilan: Tabel;
Teks-Align: tengah;
Perbatasan: 1px solid #d3d3d3; latar belakang: #fff;
}
#box span {
Tampilan: sel meja;
Vertikal-Align: tengah;
}
#box img {
Perbatasan: 1px solid #ccc;
}
</tyle>
<!-[jika LTE IE 7]>
<Tipe Gaya = Teks/CSS>
#kotak{
Posisi: kerabat;
meluap: tersembunyi;
}
#box span {
Posisi: Absolute;
Kiri: 50%; Top: 50%;
}
#box img {
Posisi: kerabat;
Kiri: -50%; atas: -50%;
}
</tyle>
<! [Endif]->
Metode 2 (XHTML 1.0 Transisi):
Prinsip dan struktur implementasi Metode 2 dan Metode 1 serupa, dan strukturnya sama. Metode 1 menggunakan anotasi bersyarat, dan Metode 2 menggunakan Hack CSS.
Bagian Gaya CSS:
<Tipe Gaya = Teks/CSS>
#kotak{
Lebar: 500px; Tinggi: 400px;
meluap: tersembunyi;
Posisi: kerabat;
Tampilan: sel meja;
Teks-Align: tengah;
Vertikal-Align: tengah;
Perbatasan: 1px solid #d3d3d3; latar belakang: #fff;
}
#box span {
Posisi: statis;
*Posisi: Absolute; /*Hack untuk IE6/7*/
Atas: 50%; /*Hack untuk IE6/7*/
}
#box img {
Posisi: statis;
*Posisi: kerabat; /*Hack untuk IE6/7*/
Atas: -50%; Kiri: -50%; /* Hack untuk IE6/7*/
Perbatasan: 1px solid #ccc;
}
</tyle>
Metode ini memiliki kelemahan. Di browser standar, karena mode tampilan dari wadah eksternal #box adalah Tampilan: Table-Cell, atribut margin tidak dapat digunakan untuk #box, dan pengaturan perbatasan di IE8 juga tidak valid.
Metode 3 (xhtml 1.0 ketat):
Browser standar masih mengatur mode tampilan dari wadah eksternal #box untuk ditampilkan: sel tabel. IE6/IE7 menggunakan metode memasukkan sepasang tag kosong di depan tag IMG.
Bagian Struktur HTML:
<Div id = box> <i> </i> <img src = gambar/demo.jpg alt => </div>
Bagian Gaya CSS:
<Tipe Gaya = Teks/CSS>
#kotak{
Lebar: 500px; Tinggi: 400px;
Tampilan: sel meja;
Teks-Align: tengah;
Vertikal-Align: tengah;
Perbatasan: 1px solid #d3d3d3; latar belakang: #fff;
}
#box img {
Perbatasan: 1px solid #ccc;
}
</tyle>
<!-[jika yaitu]>
<Tipe Gaya = Teks/CSS>
#box i {
Tampilan: blok inline;
Tinggi: 100%;
Vertical-Align: Tengah
}
#box img {
Vertical-Align: Tengah
}
</tyle>
<! [Endif]->
Metode 3 juga berlaku untuk XHTML 1.0 Transisi. Metode di atas dikumpulkan dari situs web pengajaran web. Untuk saat ini, hanya ketiga metode ini yang cukup puas dengan, dan kompatibilitasnya baik, dan keterbatasannya relatif kecil. Saya juga telah menguji beberapa metode satu per satu, tetapi hasilnya tidak ideal, dan ada perbedaan yang sangat berbeda di antara browser yang berbeda. Selain itu, Situ Zhengmei juga telah mengumpulkan beberapa metode di sini.
Berpikir: Banyak metode bergantung pada pengaturan mode tampilan dari wadah eksternal ke tabel untuk mencapai pemusatan vertikal, yaitu div untuk mensimulasikan tabel. Betapa baiknya jika CSS memiliki properti untuk mencapai efek ini. Jika Anda memiliki metode yang baik, Anda dipersilakan untuk membagikannya.
asli: