Bár ez nem feltétlenül nehéz, a képek középpontosítása a weblapjain jobban érintett, mint gondolja. Ennek fő oka az, hogy a a címke egy inline elem, így a blokkszintű elemeken eltérően viselkedik. Néhány megközelítés HTML-t használ; mások a CSS-t használják, és némelyikük „megfelelőbbnek” tekinthető, mint mások, mivel nem veszik el. A folytatáshoz válasszon ki egy módszert az alábbi listából, és kövesse az utasításokat.

A HTML5 támogatásához használjon egy stílus attribútumot a szöveges illesztés értékkel : a blokk szintű elem belsejében; például a címkéket.

Példa HTML kódra

Tipp: A fentebb bemutatott inline stílus hozzáadása csak egyszer lehetséges, ha több képet kell központosítania, az alábbi javaslatot kell használnia, és CSS osztályt kell létrehoznia a redundáns kód csökkentéséhez és a weblap felgyorsításához.

Példa a fenti kódot használó képközpontra

Konvertálás blokk szintű elemre

A képek helyes központosításának módja az elemként blokk szintű elemként. Ehhez adjon hozzá szabályt az oldal fejéhez (az alábbi példában látható), vagy egy összekapcsolt külső CSS-fájlt.

Példa HTML kódra

 .centerImage {text-align: center; display: block; } 

Ezzel a kóddal alkalmazhatja a centerImage osztályt egy címkét anélkül, hogy egy blokkszintű elemben kellene elhelyeznie. Ez a módszer több kép esetén is használható.

Példa központosított képkód

A címkék használata

A képet a címke a címkéket. Ez a cselekvési központ azt, és csak azt képezi a weboldalon. Meg kell jegyezni, hogy ez a módszer a HTML5-ben elavult, és nem mindig fog működni minden böngészőben. Csak akkor ajánljuk ezt a módszert, ha a fent említett egyéb javaslatok egyike sem működik, ha a képet középre kívánja helyezni.

Példa HTML kódra