cari

Rumah  >  Artikel  >  hujung hadapan web  >  Img dalam css tidak tahu lebar dan tinggi, bagaimana untuk mencapai pemusatan

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

青灯夜游
青灯夜游asal
2022-09-22 17:28:222237semak imbas

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>

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;
}

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;  /*行内方向（横向）所有的元素中线对齐*/
}

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!

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
Artikel sebelumnya：Apakah peranan css dalam webArtikel seterusnya：Apakah peranan css dalam web

Artikel berkaitan

Lihat lagi