Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan-Soal Jawab bahagian hadapan-php.cn

Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan

青灯夜游

Lepaskan： 2022-09-22 17:28:22

asal

2266 orang telah melayarinya

3 kaedah: 1. Gunakan atribut text-align untuk menetapkan "text-align: center;" kepada elemen induk yang mengandungi img. 2. Gunakan reka letak kotak fleksibel dan tetapkan "display: flex;justify-content: center;" kepada elemen induk. 3. Gunakan reka letak grid dan tetapkan "display:grid;align-items:center;justify-items:center;" kepada elemen induk.

Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Kaedah 1: Gunakan atribut penjajaran teks text-align

text-align untuk mengawal penjajaran baris teks dalam elemen. Anda boleh menetapkan div induk untuk img, supaya img boleh menjadi teks div, dan kemudian menggunakan penjajaran teks untuk mengubah suai atribut div. (Tambahkan atribut pada elemen induk)

Nota: Elemen anak mestilah sebaris atau sebaris-blok; jika elemen anak juga merupakan div, anda perlu menetapkan paparan: sebaris/sebaris-blok untuk kanak-kanak itu elemen di sini img elemen kanak-kanak adalah sebaris jadi tinggalkan langkah ini. Kaedah ini sesuai untuk elemen sebaris, seperti pemusatan img

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#pic {
				border: 1px solid red;
			    text-align: center;   /*表示div的子元素居中*/
			}
		</style>
	</head>

	<body>

		 <div id="pic">
		        <img  src="img/2.jpg" class="logo" alt="Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan" >
		 </div>

	</body>
</html>

Salin selepas log masuk

Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan

Kaedah 2: Gunakan susun atur kotak fleksibel

css

#pic {
    display: flex;   
    justify-content: center;
}

Salin selepas log masuk

Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan

Susun atur kotak yang fleksibel boleh mencapai hampir mana-mana susun atur menggunakan beberapa baris css. Dan perkara yang paling menakjubkan ialah walaupun dua baris teratas n gambar boleh dipusatkan, tanpa perlu mengambil kira susun atur dan kedudukan gambar.

Kaedah 3: Gunakan reka letak grid

Kotak fleksibel paling biasa digunakan dalam bar navigasi. Sebaliknya, susun atur grid ialah sistem susun atur sejagat.

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

Salin selepas log masuk

Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan

Jadi sangat mudah untuk menangani masalah menjajarkan berbilang gambar.

(Belajar perkongsian video: bahagian hadapan web)

Atas ialah kandungan terperinci Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!