En webbsida programmerare använder Hypertext Markup Language berätta webbläsaren funktionellt syfte för varje element på en sida , t.ex. ett stycke , rubrik eller lista . Sedan HTML 4 , har Cascading Style Sheets som kodaren med ett sätt att tala om 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-format för olika typer av enheter, t.ex. mobiltelefoner och stationära datorer , vilket gör att sidan utseende att ändras utan kodaren behöver ändra HTML . Använd CSS-egenskaper för att centrera en bild . Instruktioner
1
Placera " IMG " -taggen i HTML-filen där du vill ha din bild ska visas på webbsidan . Det måste vara mellan "kropp" taggar och efter de " h1 " taggar . Till exempel ,
Detta är din text . < /H1 > < img src = " photo.jpg " alt = " En beskrivning av bilden " width = " 270 " height = " 50 " />
< /body>
definierar en bild som heter photo.jpg som är 170 pixlar bred och 50 pixlar hög . Det är det första på sidan efter den översta rubriken .
2
Använd " marginalen " CSS attribut för att definiera utrymmet runt sidelement , t.ex. bilder . Den " auto " värdet för marginalen attributet berättar webbläsare för att automatiskt bestämma mängden utrymme . Så, definierar att utrymmet runt bilden bestäms av webbläsaren .
3
Använd " display " egenskapen att definiera hur ett sidelement visas . Den " blocket " värde för egenskapen display berättar webbläsare för att visa element på en egen rad , med utrymme ovanför och under den . Så , < img src = " photo.jpg " alt = " En beskrivning av bilden " width = " 170 " height = " 50 " style = " margin: auto ; display : block ; " /> definierar samma bild , men tillägg av . " display : block; " nu placerar den på sin egen linje
4
Visa webbsidan i flera olika webbläsare för att kontrollera att bilden centreras ordentligt .