logo

Hogyan lehet képeket középre helyezni CSS-ben?

A CSS segít nekünk a képek webalkalmazásokban való megjelenítésének szabályozásában. A képek vagy szövegek központosítása gyakori feladat a CSS-ben. A kép középpontba helyezéséhez be kell állítanunk az értékét margó-bal és margó-jobb nak nek auto és a segítségével blokk elemmé tegye kijelző: blokk; ingatlan.

int konvertálása karakterláncra

Ha a kép a div elemben van, akkor használhatjuk a szöveg igazítása: középre; tulajdonság a képnek a div közepére igazításához.

A Az elemet egy soron belüli elemnek nevezik, amely könnyen középre helyezhető a szöveg igazítása: középre; a CSS tulajdonságát az azt tartalmazó szülőelemhez.

Megjegyzés: A képet nem lehet középre igazítani, ha a szélesség 100%-ra van állítva (teljes szélesség).

Használhatjuk a gyorsírás tulajdonságot árrés és állítsa be auto a kép középre igazításához, nem pedig a margó-bal és margó-jobb ingatlan.

Nézzük meg, hogyan lehet középre igazítani egy képet az alkalmazással szöveg igazítása: középre; tulajdonságot a szülőeleméhez.

mi az az internet

Példa

Ebben a példában a képeket a segítségével igazítjuk szöveg igazítása: középre; ingatlan. A kép a div elemben található.

 div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> 
Tesztelje most

Kimenet

Hogyan lehet középre helyezni a képeket CSS-ben

Példa

Most a margó-bal: auto; margó-jobb: auto; és kijelző: blokk; tulajdonságait a kép középre igazításához.

 body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } 
Tesztelje most

Kimenet

Hogyan lehet középre helyezni a képeket CSS-ben