Rumah >hujung hadapan web >tutorial css >Petua untuk memusatkan imej secara menegak menggunakan pertukaran css_Experience

Petua untuk memusatkan imej secara menegak menggunakan pertukaran css_Experience

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
2016-05-16 12:05:341630semak imbas

Kesukaran soalan terletak pada dua perkara:

Berpusat menegak;
Gambar adalah elemen gantian dengan beberapa ciri khas. ,
Mengenai cara membetulkannya, berikut ialah pertukaran penyelesaian yang agak bersih dan ringkas CSS:

.kotak {
/*Kaedah pemusatan menegak yang diiktiraf oleh penyemak imbas arus perdana selain IE*/
paparan: sel jadual;
vertical-align:middle;

/*Tetapkan pemusatan mendatar*/
text-align:center;

/* Hack untuk IE */
*paparan: blok;
*saiz fon: 175px;/* ialah kira-kira 0.873 daripada ketinggian, 200*0.873 ialah kira-kira 175*/
*font-family:Arial;/*Cegah masalah kegagalan penggodaman yang disebabkan oleh bukan utf-8, seperti pengekodan gbk*/

lebar:200px;
ketinggian:200px;
sempadan: 1px pepejal #eee;
}
.imej kotak {
/*Tetapkan imej untuk berpusat menegak*/
vertical-align:middle;
}


Petua untuk memusatkan imej secara menegak menggunakan pertukaran css_Experience


Sudah tentu ada penyelesaian lain, yang saya tidak akan mendalami di sini.
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