Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk memusatkan imej dalam css

Bagaimana untuk memusatkan imej dalam css

藏色散人
Lepaskan: 2023-01-07 11:45:37
asal
10561 orang telah melayarinya

Cara untuk memusatkan imej dengan css: 1. Tetapkan ""; . Give Img Hanya tetapkan "max-width:100% max-height:100%".

Bagaimana untuk memusatkan imej dalam css

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

css untuk memusatkan gambar

css untuk memusatkan gambar, sama ada gambar itu segi empat sama, menegak atau mendatar, anda boleh memusatkan gambar di bawah bingkai induk, itu ialah Imej segi empat tepat menduduki keseluruhan bingkai induk; imej mendatar berlapik kiri dan kanan, atas dan bawah berpusat; berikut:

2. css adalah seperti berikut
    <body>
        <p id="redblock">
            <img src="katong.png" >  /*这里的图片路径自己设置*/
        </p>
    </body>
Salin selepas log masuk

3. Tetapkan gaya untuk elemen induk:
	body{
		
		background-color: gray;
	}

	#redblock{
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		width:400px;
		height: 400px;
		background-color: red;
		
	}

	img{
		max-width: 100%;
		max-height: 100%;
	}
Salin selepas log masuk

a lebar dan tinggi

b. Setkan text-align:center vertical-align: middle

c. Tetapkan paparan:table-cell

4 % untuk Img max-height:100%

5. Kesan paparan adalah seperti berikut :

                                                                                                                                                                                                                                                                                                                                                                                                                                                        


Imej menegak


Pembelajaran yang disyorkan:

tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk memusatkan imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan