Video: Spinosaurus fishes for prey | Planet Dinosaur | BBC 2024
Et av de vanligste spørsmålene om CSS3 er hvordan du senterer et bilde på siden. Dessverre, de fleste svarene du mottar, diskuterer bare
-taggen, uten å vise hvordan du kan sentrere en container. Å bruke en beholder er viktig fordi du kanskje vil legge til andre elementer i bildet senere. Følgende fremgangsmåte forteller hvordan du senterer bildet.-
Åpne SimpleGraphics. CSS-fil og legg til følgende stil.
#ImageContainer img {høyde: 400px; bredde: 400px; margin: 0px;}
Formålet med denne stilen er å lage et bilde av en bestemt størrelse. Det finnes en rekke måter å håndtere bilder av forskjellige størrelser. Dette er en av dem. Det fungerer bra når de fleste bildene dine er omtrent samme størrelse.
I noen tilfeller, for eksempel når du senterer bilder av vidt forskjellige størrelser, må du ty til bruk av JavaScript. For å plassere et bilde midt på siden må du kjenne størrelsen på bildet. Mange tredjepartsbiblioteker gjør det enkelt for deg å sentrere bilder på skjermen - CSS-only-teknikken har begrensninger.
-
Legg til følgende kode i #ImageContainer-stilen.
posisjon: absolutt; høyde: 400px; bredde: 400px; venstre: 50%; margin-venstre: -205px;
Denne koden setter posisjonen som absolutt og gir den samme størrelse som bildet, slik at og
-kodene er koblet. Den plasserer deretter venstre side av 50% på tvers av siden, slik at uansett hvordan brukeren endrer nettleservinduet, forblir venstre side av testen senter.Selvfølgelig vil du ikke sitte på venstre side av - du vil sentrere bildet. Innstillingen for margen-venstre beveger venstre margen 205 piksler til venstre (halvparten av bildetes totale størrelse, pluss polstringen), slik at midten av bildet er nå midt på siden.
-
Lagre CSS-filen og last siden på nytt.
Du ser bildet og rammen som er sentrert på siden.