Hvordan Sentrer et bilde med CSS

Hvis du ønsker å sentrere et bilde på nettsiden din, er det enkelt å gjøre det med CSS. Her er de enkle trinn.

Bruksanvisning

1 Hvis du ønsker å sentrere et bilde som det av cowboyene på hestene vist ovenfor, først finne ut hva din CSS velgeren skal være. Velger for et bilde er img. Men kan du ikke ønsker å bruke denne velger alene, fordi hvis du gjør det, vil hvert bilde på siden din være sentrert. Bruk en mer spesifikk velger å sentrere bare et enkelt bilde eller en gruppe av bilder.

2 Her er et scenario: du ønsker å sentrere forhåndsvise bilder i et sidefelt. Du har en div som heter #sidebar og en klasse kalt .preview for bildene og koblinger du oppretter i sidepanelet. Din velgeren kan være #sidebar .preview img. Denne bryteren velger noen img element som er en etterkommer av et element med en klasse attributt som inneholder ordet forhåndsvisning, som er en etterkommer av et element med en id-attributt som tilsvarer sidepanelet. Din situasjon kan være annerledes, selvfølgelig, men prøver å komme opp med en velger som er spesielt rettet mot bare de bildene du ønsker å sentrere.

3 Gjør img en blokk nivå element. I scenariet ovenfor, vil dette være den CSS-regel.

sidebar .preview img {

display: block;
}

4 Legg margin regler som vil sentrere bildet. I scenariet ovenfor, vil dette være den komplette regelen.

sidebar .preview img {

display: block;
margin-right: auto;
margin-left: auto;
}

5 Regelen i trinn 4 er alt du trenger; bare sørg for at velgeren er spesifikke nok til å målrette bare de bildene du ønsker sentrert.