Introductie
Het centreren van elementen met behulp van CSS word door voor veel beginnende frontend developers als lastig ervaren. Maar waarom eigenlijk? Waarschijnlijk omdat het niet zozeer echt ingewikkeld is, meer omdat er zoveel verschillende mogelijkheden zijn om elementen in HTML te centreren. Het hangt van de situatie af welke manier van centreren het beste gekozen kan worden. In dit document worden verschillende manieren beschreven hoe je elementen kunt centreren met behulp van CSS.
In basis zijn er eigenlijk 3 soorten van centrering mogelijk in een HTML document:
- Horizontaal
- Verticaal
- Verticaal en Horizontaal
Afhankelijk van de wens van de gebruiker, de indeling van het document en gebruikte elementen zijn diverse manieren mogelijk om deze centering te realiseren. Laten we eerste beginnen met het verschil vast te stellen tussen twee belangrijke element types in HTML:
- Inline elementen
- Block elementen
Inline elementen
Een inline element is een element binnen HTML welke op dezelfde lijn worden geschreven. Neem bijvoorbeeld een <span> element. Schrijf je meer van dit soort elementen achter elkaar in je code, zet er een tekst tussen dan merk je dat de tekst achter elkaar op dezelfde regel doorloopt. Er zijn veel meer inline elementen dan het <span> element. Voor een overzicht hiervan bekijk je de volgende pagina op de website van Mozilla.
Inline elementen kun je het eenvoudigste centreren met CSS door de text-align eigenschap in te stellen met de waarde text-align: center. Bekijk het onderstaande voorbeeld maar eens, hierin worden de tekst in het block element <header> gecentreerd maar ook de <a> (inline) elementen gecentreerd binnen het <nav> element volgen dit principe. Logisch natuurlijk want zowel de header als het nav parent element zijn onderdeel van de class .center-text welke weer verantwoordelijk is voor de text-align:center eigenschap.
.center-text {
text-align: center;
}
<header class="center-text">
This text is centered.
</header>
<nav class="center-text">
<a href="#0">One</a>
<a href="#0">Two</a>
<a href="#0">Three</a>
<a href="#0">Four</a>
</nav>
Je kunt dus eigenlijk zeggen dat niet alleen normale tekst de text-align eigenschap volgt maar ook inline elementen zoals in dit voorbeeld het <a> element. Uiteraard geldt dit principe voor alle inline elementen. Dus ook bijvoorbeeld het <img> element:
<div class="center-text">
<img src="img/logo.png" width="10%">
</div>Block elementen
Centreren van block elementen gaat op een andere manier, hierbij werkt het toepassen van de text-align eigenschap niet. Alvorens met centreren van block elemten te starten is het van belang om te begrijpen hoe een block elementen nu eigenlijk werkt.
Een block-level element start standaard op een nieuwe lijn in je HTML document. Zet je meerdere block elementen in je HTML achter elkaar en je zult zien dat ze onder elkaar in de webbrowser worden getoond:
<div>ik ben een block a</div>
<div>ik ben een block b</div>
<div>ik ben een block c</div>
<div>ik ben een block d</div>Kijk je wat verder naar een block elementen door de inspector van je webbrowser te openen dat zul je zien dat de content (lees: inhoud) van ieder <div> element horizontaal ongeveer net zo groot (lees: breed) is als de viewport.
Door viewport te vergroten of te verkleinen met je muis zul je zien dat de content qua breedte direct mee veranderd. Er is feitelijk geen ruimte aan de linker en rechter kant van dit element om het element als geheel te kunnen centeren. Om dit te realiseren moet het element dus kleiner gemaakt worden. Je kunt dit eenvoudig oplossen door het element een breedte (lees: width) te geven die kleiner is de de standaard breedt (welke de volledige mogelijke breedte inneemt). Een handige manier om dit voor elkaar te krijgen is werken met procenten. Stel bijvoorbeeld de breedte van de <div> elementen in bovenstaand voorbeeld in op 50%.
.block-container {
width: 50%;
}<div class="block-container">
<div>ik ben een block a</div>
<div>ik ben een block b</div>
<div>ik ben een block c</div>
<div>ik ben een block d</div>
</div>
Kijk je naar dit voorbeeld dat zie je dat de content (het blauwe gebied) van de block elementen de helft van de mogelijke breedte is geworden. Het overige deel (het oranje gebied) betreft nu de marge. En zoals wellicht bekend kun je de marge van een element wijzigen met de margin eigenschap in CSS.
Probeer maar eens de margin-left en margin-right op auto te zetten. Hiermee wordt automatisch voor jou uitgezocht hoeveel ruimte aan de linker en rechter zijde qua marge vrij is zodat het element in zijn geheel zal worden gecentreerd:
Als alternatief voor zowel de margin-left als margin-right in te stellen kun je ook de short-hand manier gebruiken. Deze stelt in één keer zowel de linker als rechter marge in. In onderstaand voorbeeld wordt de top en bottom marge op 0 gezet.
.block-container {
width: 50%;
margin: 0 auto;
}Zoals je ziet is de tekst zelf binnen de content van het <div> element niet gecentreerd. Om dit op te lossen dien je de CSS text-align:center toe te voegen zoals in het vorige onderdeel is beschreven.
.block-container {
width: 50%;
margin: 0 auto;
text-align:center;
}