Hvordan Sentrer et bilde på min webside

May 13

Presentere og posisjonere bilder på en nettside er en integrert del av designet. Ofte kravene kaller for venstrerettferdiggjøre elementer som tekst, og samtidig posisjonering grafiske elementer annerledes, for eksempel sentre dem nøyaktig på siden. En av de beste-praksis metoder for å sentrere et bilde er å bruke Cascading Style Sheets (CSS). Sentre et bilde ved hjelp av denne metoden vil fungere godt for noen grafiske av alle størrelser, og den samme koden kan brukes på hvilken som helst side.

Bruksanvisning

1 Åpne nettside som inneholder bildet som skal sentreres ved hjelp av en web-forfatterverktøy.

2 Finn HTML som omgir bildet - det skal se omtrent slik ut:

<Img width = "300" height = "199">,

hvor mypic.jpg er navnet på bildet du vil sentrert og den tilsvarende bredde og høyde.

3 Lag en stil klasse i HEAD-delen av HTML ved å legge til følgende:

.centerImage {text-align: center; margin-top: 0px; margin-bottom: 0px; padding: 0px; }

</ Style>

4 Endre HTML for at bildet skal

<P class = "centerImage"> <img width = "300" height = "199"> </ p>.

Igjen, endre bildenavn, bredde og høyde til navnet og dimensjonene på bildet. Dette vil ikke bare plassere bildet på direkte sentrum av nettsiden, men vil gjøre det samme for et annet bilde på andre sider hvis du kopierer og inkludere CSS stil og klasse uttalelse som vist.

5 Last opp din nettside, eller forhåndsvise det i en nettleser som tillates av forfatterverktøy.