Hvordan å gjøre en Posisjonert Image Med CSS

Når du legger til et bilde til din webside, vises det som et inline element (mellom tekst) som standard. Du kan endre bildet som skal vises på venstre, høyre eller sentrum eller på et fast, absolutt eller relativ posisjon på en webside. Fast viser et bilde i en fast posisjon i forhold til nettleservinduet. Absolutt viser det i en absolutt posisjon i forhold til den overordnede beholder. Relative viser grafikk i en relativ posisjon i forhold til sin normale stilling. Du kan bruke Cascading Style Sheets å plassere grafikk på weben.

Bruksanvisning

1 Start en tekstredigeringsprogram, for eksempel Notisblokk, TextPad eller EditPad.

2 Legg til følgende CSS-koden inn på siden, slik at bildene på nettsiden din:

img .position {
text-align: center;

3 Erstatt "center;" med "venstre;" til venstre justere bildet eller "høyre;" til høyre justere det, for eksempel:

img .position {
text-align: left;
}

4 Erstatte koden i trinn 2 med følgende til posisjon grafikk i en fast posisjon i stedet. Koden under plasserer bilde 5 piksler fra høyre og 25 piksler fra bunnen. For å endre posisjon, erstatte "høyre: 5px; bottom: 25px;" med den nøyaktige plasseringen du ønsker å søke (for eksempel "venstre: 5px; top: 5px;").

img .position {
stilling: fast;
høyre: 5px;
bottom: 25px;
}

5 Change "fast" til "absolutt" i trinn 4 kode for å bruke en absolutt posisjon til et bilde som følger:

img .position {
position: absolute;
høyre: 5px;
bottom: 25px;
}

6 Change "fast" til "slektning" i trinn 4 kode for å bruke en relativ posisjon til grafikken som følger:

img .position {
position: relative;
høyre: 5px;
bottom: 25px;
}

7 Velg "File" og "Save" fra menyen for å lagre filen. Gi navn til filen "style.css" i "Lagre som" i dialogboksen og klikk "Lagre".

8 Lukk CSS-filen og velg "Fil" og "Open" fra teksteditor-menyen. "Åpne" dialogboksen vises. Dobbeltklikk på HTML-fil som inneholder grafikken du ønsker å plassere.

9 Sett inn følgende kode rett under åpningen HEAD taggen. Det skaper en kobling til CSS-filen og gjelder sine stiler til HTML-fil.

<Link href = "style.css" rel = "stylesheet" type = "text / css">

10 Velg "File" og "Save" fra menyen for å lagre endringene.