Kép középre állítása függőlegesen és vízszintesen a CSS segítségével

Sok fejlesztő küzd képekkel való munka közben. Az érzékenység és az igazítás kezelése különösen nehéz, különösen az oldal közepén lévő kép középre állítása.

Tehát ebben a bejegyzésben bemutatom a kép függőleges és vízszintes középre állításának leggyakoribb módjait, különböző CSS tulajdonságok használatával.

Korábbi bejegyzésemben áttekintettem a CSS pozíció és a megjelenítés tulajdonságait. Ha nem ismeri ezeket a tulajdonságokat, javasoljuk, hogy a cikk elolvasása előtt nézze meg ezeket a bejegyzéseket.

Itt van egy videó verzió, ha meg akarja nézni:

Kép vízszintes középre helyezése

Kezdjük azzal, hogy egy képet vízszintesen három különböző CSS tulajdonság segítségével központosítunk.

Szöveg igazítás

A kép vízszintes középre állításának első módja a text-aligntulajdonság használata. Ez a módszer azonban csak akkor működik, ha a kép blokkszintű tárolóban van, például :

 div { text-align: center; } 

Margó: Automatikus

A kép középpontosításának másik módja a margin: autotulajdonság használata (bal margóhoz és jobb margóhoz).

A margin: autoképek önmagában való használata azonban nem fog működni. Ha használni kell margin: auto, további 2 tulajdonságot kell használnia.

A margin-auto tulajdonságnak nincs hatása a belső szintű elemekre. Mivel a címke inline elem, először blokk szintű elemgé kell átalakítanunk:

img { margin: auto; display: block; }

Másodszor meg kell határoznunk egy szélességet is. Tehát a bal és a jobb margó átveheti a többi üres helyet, és automatikusan igazodhat, ami megcsinálja (hacsak nem adunk neki 100% szélességet):

img { width: 60%; margin: auto; display: block; }

Kijelző: Flex

A kép vízszintes középre állításának harmadik módja a display: flex. Ahogy az text-aligningatlant egy konténerhez használtuk display: flex, a konténerhez is.

Az display: flexönmagában történő használat azonban nem lesz elegendő. A konténernek rendelkeznie kell egy további tulajdonsággal is justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

A justify-contenttulajdonság együtt működik display: flex, amellyel vízszintesen középre tudjuk állítani a képet.

Végül a kép szélességének kisebbnek kell lennie, mint a tároló szélessége, különben a hely 100% -át elviszi, és akkor nem tudjuk középre állítani.

Fontos: A display: flextulajdonság a böngészők régebbi verzióiban nem támogatott. További részletekért lásd itt.

Kép függőleges középre állítása

Kijelző: Flex

A függőleges igazításhoz a használat display: flexismét nagyon hasznos.

Vegyünk egy olyan esetet, amikor a tárolónk magassága 800 képpont, de a kép magassága csak 500 képpont képpont:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Ebben az esetben egyetlen kódsor hozzáadása a tárolóhoz a következőt align-items: centerteszi:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

A align-itemstulajdonság az elemeket függőlegesen helyezheti el, ha együtt használják display: flex.

Pozíció: Abszolút és transzformációs tulajdonságok

A vertikális igazítás másik módja a positionés a transformtulajdonságok együttes használata. Ez egy kicsit bonyolult, ezért tegyük meg lépésről lépésre.

1. lépés: Adja meg az abszolút pozíciót

Először is, mi változik a helyező viselkedése a képet static, hogy absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Ezenkívül egy viszonylag elhelyezett tartályon belül kell lennie, ezért hozzáadjuk position: relativea tartályához div.

2. lépés: Adja meg a felső és a bal oldali tulajdonságokat

Másodszor meghatározzuk a kép felső és bal tulajdonságait, és 50% -ra állítjuk őket. Ez áthelyezi a kép kezdőpontját (balra fent) a tároló közepére:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

3. lépés: Adja meg a transzformációs tulajdonságot

De a második lépés a képet részben a tartályán kívülre mozgatta. Tehát vissza kell hoznunk.

transformTulajdonság definiálása és -50% hozzáadása annak X és Y tengelyéhez:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

A vízszintes és függőleges központosításnak más módjai is vannak, de elmagyaráztam a leggyakoribbakat. Remélem, hogy ez a bejegyzés segített megérteni, hogyan igazíthatja képeit az oldal közepére.

Ha többet szeretne megtudni a webfejlesztésről, keresse fel bátran a Youtube csatornámat.

Köszönöm, hogy elolvasta!