Kaedah: 1. Tambahkan gaya kedudukan relatif pada elemen induk elemen foto dan gaya kedudukan mutlak pada elemen foto 2. Gunakan atribut atas dan atribut "margin-top" untuk menetapkan foto untuk berpusat secara menegak, hanya berikan foto Hanya tambahkan gaya "top:50%;margin-top:top margin;"
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Cara memusatkan foto secara menegak dengan css
Gunakan kedudukan mutlak untuk mencapai pemusatan menegak
Tambahkan pada induk elemen img Atribut kedudukan relatif (kedudukan: relatif), dan pada masa yang sama, tambahkan atribut kedudukan mutlak (kedudukan: mutlak) pada elemen anak, iaitu elemen img imej.
2. Tetapkan atribut atas elemen imej kepada 50%.
3 Sekarang kita perlu menetapkan nilai atas margin negatif untuk elemen img Nilai ini adalah separuh daripada ketinggian elemen yang anda ingin capai pemusatan menegak elemen, anda tidak boleh menggunakan margin -top, sebaliknya gunakan atribut transform:translateY(-50%);
Ingat: jika anda ingin memusatkan secara mendatar juga, anda boleh melakukannya menggunakan teknik yang sama yang anda gunakan untuk memusatkan secara menegak.
Contoh adalah seperti berikut:
<html>
<head>
<style type="text/css">
.posdiv{
width: 300px;
height: 250px;
position: relative;
border:1px solid red;
}
.posdiv img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="posdiv">
<img src="1118.02.png" alt="">
</div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: css tutorial video )
Atas ialah kandungan terperinci Bagaimana untuk memusatkan foto secara menegak dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
