Även om det inte nödvändigtvis är svårt, kan centrerande bilder på dina webbsidor vara mer inblandade än vad du tror. Den främsta anledningen är att taggen är ett inline-element, så det beter sig annorlunda än blocknivåelement. Vissa metoder använder HTML; Andra använder CSS, och vissa anses vara mer "korrekta" än andra genom att de inte avlägsnas. För att fortsätta väljer du en metod från listan nedan och följer anvisningarna.

För stöd i HTML5 ska du använda ett stilattribut med värdet textjustera: center inuti ett blocknivåelement; så som en taggar.

Exempel HTML-kod

Tips: Lägga till en inline-stil som visas ovan bör bara göras en gång. Om du behöver centrera flera bilder ska du använda nedanstående förslag och skapa en CSS-klass för att minska överflödig kod och öka din webbsida.

Exempel på bildcenter med ovanstående kod

Konvertering till ett blocknivåelement

Ett sätt du kan korrekt centrera bilder är att definiera element som ett blocknivåelement. För att göra detta lägger du till en regel i huvudet på din sida (visas i följande exempel) eller en länkad extern CSS-fil.

Exempel HTML-kod

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

Med den här koden kan du ange centerImage- klassen till en tagg utan att behöva boa det i ett blocknivåelement. Den här metoden fungerar för flera bilder.

Exempel centrerad bildkod

Använda taggarna

Du kan centrera en bild genom att omsluta tagga i taggar. Denna åtgärd centrerar det, och bara det, bilden på webbsidan. Det bör noteras att denna metod avlägsnas i HTML5 och kommer inte alltid att fungera i alla webbläsare framåt. Vi rekommenderar endast att använda den här metoden om inget av de andra ovan nämnda förslagen fungerar där du försöker centrera en bild.

Exempel HTML-kod