Afbeeldingen centreren met CSS

Wilt u een afbeelding centreren met CSS? Afstemmingsproblemen zijn vaak een bron van frustratie voor webdesigners. Gelukkig is het centreren van een afbeelding met CSS heel eenvoudig, en we laten je zien hoe je dit in een paar stappen voor elkaar krijgt.

Zoals met veel webontwerptaken, is er meer dan één manier om dit voor elkaar te krijgen! We zullen in dit artikel drie belangrijke methoden behandelen. Laten we beginnen!

1. Gebruik de marge Eigenschap

De. instellen marge eigenschap is een van de gemakkelijkste manieren om een ​​afbeelding horizontaal te centreren met behulp van CSS. Marges zijn een kernonderdeel van het CSS-boxmodel.

Eerst moet u het afbeeldingselement transformeren van een inline-element naar een blokelement. HTML-elementen op blokniveau nemen de volledige breedte van hun bovenliggende element in beslag en kunnen de volledige breedte van een pagina in beslag nemen.

Door van een afbeeldingselement een blokelement te maken, kunt u de positie ervan manipuleren door de horizontale marges aan te passen. U moet ook een specifieke breedte voor de afbeelding instellen om te bepalen hoeveel ruimte de afbeelding op de pagina inneemt.

Welke breedte u ook kiest, de afbeelding moet gelijke linker- en rechtermarges hebben. U kunt dit eenvoudig bereiken door de marge-eigenschap een waarde te geven van auto:

img.center {
 weergave: blok;
 marge-links: automatisch;
 marge-rechts: auto;
 breedte: 800px;
}

2. Flexbox-indeling gebruiken

Deze methode vereist dat de afbeelding in een element op blokniveau wordt geplaatst, meestal a div:

Zodra u dit hebt gedaan, kunt u enkele eigenschappen toevoegen om het uiterlijk te manipuleren. U gebruikt twee CSS-eigenschappen.

De eerste is de Scherm eigenschap met de waarde ingesteld op buigen. Je kan ook gebruik flex om elementen in HTML uit te lijnen. De tweede eigenschap die u aan uw div toevoegt, is rechtvaardigen-inhoud, met de waarde ingesteld op centrum zoals zo:

div.centrum {
 weergave: flexibel;
 rechtvaardigen-inhoud: centrum;
}

3. Gebruik het verouderde middelste element

Best practices voor het web raden u aan om CSS te gebruiken voor opmaak en HTML voor semantiek, dus u moet deze HTML-methode niet gebruiken. De centrum tag, die de inhoud horizontaal centreert, is verouderd in HTML5.

Maar als het moet, kunt u als volgt een afbeelding centreren met alleen HTML. Wikkel de img tag in een center-tag als volgt:

Zo kunt u uw afbeeldingen in HTML uitlijnen

We hebben u drie verschillende, gebruiksvriendelijke methoden laten zien om uw afbeeldingen in een HTML-document te centreren. Probeer ze allemaal en kies degene die het beste bij je past. Vermijd de derde methode, tenzij je absoluut geen keus hebt!

Een ding om in gedachten te houden is dat er nog veel meer manieren zijn om afbeeldingen te centreren met HTML en CSS. Een veelgebruikte methode die werkt voor zowel tekst als inline-afbeeldingen is de tekst-uitlijnen eigendom.

Hoe u tekst centreert op uw webpagina met CSS

Lees volgende

Over de auteur