Képek központosítása CSS-sel

CSS segítségével szeretné középre helyezni a képet? Az igazítási problémák gyakran okoznak csalódást a webtervezőknek. Szerencsére a kép középpontba állítása CSS-sel nagyon egyszerű, és megmutatjuk, hogyan teheti ezt meg néhány lépésben.

Mint sok webdesign feladatnál, ezt is többféleképpen lehet elvégezni! Ebben a cikkben három fő módszert ismertetünk. Kezdjük el!

1. Használja a margó tulajdonságot

Beállítása a árrés tulajdonság az egyik legegyszerűbb módja a kép vízszintes középre állításának CSS használatával. A margók alapvető összetevői a CSS doboz modell.

Először is át kell alakítania a képelemet soron belüli elemről blokkká. A blokkszintű HTML-elemek a szülőelemük teljes szélességét elfoglalják, és képesek az oldal teljes szélességét elfoglalni.

Ha egy képelemet blokk elemmé tesz, akkor a vízszintes margóinak beállításával módosíthatja a helyzetét. Ezenkívül be kell állítania a kép szélességét, hogy meghatározza, mennyi helyet foglal el a kép az oldalon.

Bármilyen szélességet is választ, a képnek egyenlő bal és jobb margót kell tartalmaznia. Ezt könnyen elérheti, ha a margin tulajdonság értékét adja meg

auto:

img.center {
 kijelző: blokk;
 margó-bal: auto;
 margó-jobb: auto;
 szélesség: 800 képpont;
}

2. Használja a Flexbox elrendezést

Ez a módszer megköveteli, hogy a képet egy blokk szintű elembe helyezzük, általában a div:

Miután ezt megtette, hozzáadhat néhány tulajdonságot a megjelenés módosításához. Két CSS-tulajdonságot fog használni.

Az első a kijelző -ra beállított értékkel tulajdonság Flex. Te is használja a flexet az elemek igazításához a HTML-ben. A második tulajdonság, amelyet hozzáad a div-hez: indokolja-tartalom, amelynek értéke a következőre van állítva központ így:

div.center {
 kijelző: flex;
 indokol-tartalom: center;
}

3. Használja az Elavult középső elemet

A webes bevált módszerek azt javasolják, hogy a CSS-t használd a stílushoz, a HTML-t pedig a szemantikához, ezért ne használd ezt a HTML-módszert. A központ címke, amely vízszintesen középre állítja a tartalmát, elavult a HTML5-ben.

De ha muszáj, íme, hogyan helyezhet középre egy képet kizárólag HTML használatával. Egyszerűen csomagolja be a img tag egy középső címkében, például:

Így igazíthatja képeit HTML-ben

Három különböző, könnyen használható módszert mutattunk be a képek HTML-dokumentumban való központosítására. Próbálja ki mindegyiket, és válassza ki az Ön számára legmegfelelőbbet. Kerülje a harmadik módszert, hacsak nincs más választása!

Egy dolog, amit szem előtt kell tartani, hogy még jó néhány módja van a képek HTML és CSS használatával történő központosításának. Az egyik általános módszer, amely szöveges és szövegközi képek esetén is működik, a szöveg igazítás ingatlan.

Szöveg igazítása a weboldalon a CSS segítségével

Olvassa el a következőt

A szerzőről