Rumah > Artikel > hujung hadapan web > Bagaimana untuk memusatkan imej dengan css
Bagaimana untuk memusatkan imej dengan css
- WBOYasal
- 2023-05-21 10:38:364394semak imbas
Dalam reka bentuk web, gambar, sebagai bahagian penting halaman, selalunya perlu ditetapkan untuk dipaparkan di tengah. Artikel ini akan memperkenalkan cara untuk memusatkan imej melalui CSS.
Kaedah pertama: gunakan atribut penjajaran teks
Atribut penjajaran teks menentukan penjajaran mendatar kandungan teks dalam elemen Ia biasanya digunakan untuk elemen peringkat blok, tetapi boleh juga digunakan untuk elemen dalam talian. Apabila atribut penjajaran teks ditetapkan ke tengah, kandungan teks dalam elemen akan dijajarkan secara mendatar dan tengah. Apabila kandungan teks ialah imej, imej itu juga akan dipusatkan.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<img src="example.jpg" alt="example image">
</div>
</body>
</html>Seperti yang ditunjukkan dalam kod di atas, dengan meletakkan imej dalam elemen div dengan atribut text-align:center, imej boleh dipaparkan di tengah.
Kaedah kedua: Gunakan atribut margin
Atribut margin digunakan untuk menetapkan margin elemen dan menolak elemen keluar dari elemen atau sempadan lain. Apabila menggunakan atribut margin dan menetapkan margin kiri dan kanannya kepada auto, kandungan elemen akan dipusatkan secara automatik.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<img src="example.jpg" alt="example image" class="center">
</body>
</html>Seperti yang ditunjukkan dalam kod di atas, dengan menambahkan atribut kelas pada imej, dan kemudian menetapkan marginLeft dan marginRight elemen kelas kepada auto dalam gaya CSS, dan menetapkan atribut paparan untuk menyekat, imej boleh dipusatkan.
Kaedah ketiga: Gunakan susun atur fleksibel
Susun atur fleksibel ialah model kotak fleksibel yang membolehkan kawalan lebih baik ke atas item dalam bekas fleksibel. Flexbox mengawal penjajaran elemen anak dalam bekas melalui atribut align-item, justify-content dan align-self. Apabila kedua-dua sifat align-item dan justify-content flex ditetapkan ke tengah, item dalam bekas akan dijajarkan secara automatik di tengah.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="example image">
</div>
</body>
</html>Seperti yang ditunjukkan dalam kod di atas, dengan menambahkan atribut reka letak fleksibel pada bekas induk yang mengandungi imej, imej boleh dijajarkan secara automatik di tengah.
Ringkasnya, ketiga-tiga kaedah di atas boleh mencapai paparan berpusat imej dengan mudah. Anda boleh memilih kaedah yang sesuai mengikut situasi tertentu untuk mencapai kesan paparan yang terbaik.
Atas ialah kandungan terperinci Bagaimana untuk memusatkan imej dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!