Hvordan man centrerer et billede i CSS3 - dummies

Et af de mest stillede spørgsmål om CSS3 er, hvordan man centrerer et billede på siden. Desværre besvarer de fleste af de svar, du modtager, kun

-taggen, uden at vise, hvordan du centrerer en container. Brug af en container er vigtig, fordi du måske vil tilføje andre elementer til billedet senere. Følgende procedure fortæller, hvordan du centrerer billedet.

1. Åbn SimpleGraphics. CSS-fil og tilføj følgende stil.

   #ImageContainer img {højde: 400px; bredde: 400px; margin: 0px;}
   

   Formålet med denne stil er at skabe et billede af en bestemt størrelse. Der er en række måder at håndtere billeder af forskellige størrelser. Dette er en af ​​dem. Det fungerer godt, når de fleste af dine billeder har samme størrelse.

   I nogle tilfælde, f.eks. Når du centrerer billeder af meget forskellige størrelser, skal du ty til at bruge JavaScript. For at placere et billede i midten af ​​siden skal du vide størrelsen på billedet. Mange tredjepartsbiblioteker gør det nemt for dig at centrere billeder på skærmen - CSS-only-teknikken har grænser.

2. Tilføj følgende kode til #ImageContainer-stilen.

   position: absolut; højde: 400px; bredde: 400px; venstre: 50%; margen-venstre: -205px;
   

   Denne kode angiver positionen som absolut og giver den samme størrelse som billedet, så at og

   tagsne er forbundet. Derefter placeres venstre side af 50% på tværs af siden, så uanset hvordan brugeren ændrer browservinduet, forbliver venstre side af testamentet centralt.

   Selvfølgelig vil du ikke centrere venstre side af - du vil centrere billedet. Indstillingen for margen-venstre bevæger venstre margen 205 pixels til venstre (halvdelen af ​​billedets samlede størrelse plus polstring), så midten af ​​billedet er nu midt på siden.

3. Gem CSS-filen og genindlæs siden.

   Du ser billedet og dets ramme centreret på siden.