Hur man centrerar en bild med HTML-programmering

...

Använd CSS för att ange webbsidans utseende.

En webbsideskodare använder Hypertext Markup Language för att berätta för webbläsaren det funktionella syftet med varje element på en sida, såsom ett stycke, en rubrik eller en lista. Sedan HTML 4 har Cascading Style Sheets försett kodaren med ett sätt att berätta för webbläsaren hur vart och ett av dessa element ska se ut, separat från att definiera vad de är. En sida kan ha olika CSS-stilar för olika typer av enheter, som mobiltelefoner och stationära datorer, vilket gör att sidans utseende kan ändras utan att kodaren behöver ändra HTML. Använd CSS-egenskaper för att centrera en bild.

Steg 1

Placera "img"-taggen i HTML-filen där du vill att din bild ska visas på webbsidan. Det måste vara mellan "body"-taggarna och efter "h1"-taggarna. Till exempel,

Dagens video

Det här är din text.

En beskrivning av bilden

definierar en bild med namnet photo.jpg som är 170 pixlar bred och 50 pixlar hög. Det är det första på sidan efter den översta rubriken.

Steg 2

Använd CSS-attributet "marginal" för att definiera utrymmet runt sidelement, som bilder. "auto"-värdet för marginalattributet talar om för webbläsaren att automatiskt bestämma mängden utrymme. Så,

En beskrivning av bilden definierar att utrymmet runt bilden bestäms av webbläsaren.

Steg 3

Använd egenskapen "display" för att definiera hur ett sidelement ska visas. "Block"-värdet för egenskapen display talar om för webbläsaren att visa elementet på sin egen rad, med mellanslag över och under. Så, En beskrivning av bilden definierar samma bild, men tillägget av "display: block;" placerar den nu på sin egen linje.

Steg 4

Visa webbsidan i flera olika webbläsare för att kontrollera att bilden är korrekt centrerad.

Dricks

Inkludera bildbeskrivningen i en "alt"-tagg. Detta gör din sida mer tillgänglig för synskadade läsare och säkerställer att din kod är standardkompatibel. En beskrivning av bilden