Hoe Center een afbeelding met CSS

Als u centreren van een afbeelding op uw webpagina's wilt, is het eenvoudig te doen met CSS. Hier zijn de eenvoudige stappen.

Wat die u nodig hebt

• Een afbeelding te centreren

• Een webpagina of blogbericht

• Als u centreren van een beeld als die van de cowboys op paarden hierboven wilt, eerst uitzoeken wat uw CSS-selector zou moeten zijn. De selector voor een afbeelding is img. Echter, u kan niet wilt gebruiken deze selector alleen, want als je dat doet, elke afbeelding op uw pagina wordt gecentreerd. Gebruik een meer specifieke selector om slechts een enkele afbeelding of groep afbeeldingen centreren.

• Hier is een scenario: u wilt centreren voorbeeldafbeeldingen in een zijbalk. Hebt u een div genaamd #sidebar en een klasse met de naam .preview voor de beelden en de koppelingen die u in de zijbalk maakt. Uw selector zou #sidebar .preview img. Deze selector selecteert een img-element dat is een afstammeling van een element met een class attribuut met de preview van het woord, die is een afstammeling van een element met een id attribuut die gelijk is aan de zijbalk. Uw specifieke situatie kan anders zijn, natuurlijk, maar proberen te komen met een selector die specifiek gericht is op alleen de afbeeldingen die u wilt centreren.

• Controleer de img een block-level element. In het bovenstaande scenario zou dit de CSS-regel.

  zijbalk .preview img {}

  weergeven: blokkeren;
  }

• Marge regels toevoegen waardoor zal het centrum van het beeld. In het bovenstaande scenario zou dit de volledige regel.

  zijbalk .preview img {}

  weergeven: blokkeren;
  margin-right: automobiel;
  margin-left: automobiel;
  }

• De regel in stap 4 is alles wat die u nodig hebt; Zorg ervoor dat uw selector is specifiek genoeg om alleen de afbeeldingen die u centreren wilt.