IN DEZE HANDLEIDING:
Inhoud van een Div-element naar beneden uitlijnen
Met CSS kun je de inhoud van een div element naar beneden uit te lijnen met speciale technieken. Ook kunnen we de inhoud uitlijnen aan de bovenkant van een div, aan de onderkant aan de linkerkant of aan de rechterkant. We zullen alle mogelijke varianten bespreken.
Het is heel eenvoudig als je de hieronder beschreven stappen volgt. Laten we een voorbeeld bekijken en proberen elk deel van de code samen te bekijken.
- Maak een div met de class “main”. It includes three other elements.
- Plaats een h2 tag in de eerste div, die de class naam “kolom1” heeft, schrijf er wat inhoud in.
- De tweede div heeft de class met de naam “kolom2”.
- De derde div heeft een id met de naam “bottom”.
html maken voor div en kolommen
<body>
<div class="main">
<div class="kolom1">
<h3>CursusWP</h3>
</div>
<div class="kolom2">
Lorem Ipsum tekst van Arthur
</div>
<div id="bottom">Inhoud onderkant Div</div>
</div>
</body>
CSS toevoegen voor uitlijning
- Gebruik de eigenschappen voor rand, hoogte, breedte en positie om de “main”-klasse op te maken. De eigenschap float definieert aan welke kant van de container de elementen moeten worden geplaatst. De eigenschap position specificeert de positie van het element in een document.
- Stel de kleur in voor de tekst van de eerste . In dit voorbeeld gebruiken we een “hex”-waarde voor de kleur.
- Gebruik de eigenschap text-align om de binnenste inhoud van het block-element uit te lijnen.
- Gebruik de eigenschappen onderaan en links. De eigenschap bottom specificeert de onderste positie van een element samen met de eigenschap position. De eigenschap left specificeert de linkerpositie van een element samen met de eigenschap position.
Let op de absolute en relative waardes
.main {
border: 1px solid #4287f5;
height: 180px;
width: 500px;
position: relative;
}
.kolom1 {
color: #4267f5;
text-align: center;
}
.kolom2 {
text-align: center;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
}
Voorbeelden uitlijning div element
In het volgende voorbeeld is de inhoud van een rechtsonder uitgelijnd. Voorbeeld van het uitlijnen van de inhoud rechtsonder:
<html>
<head>
<title>Titel van het document</title>
<style>
.main {
border: 1px solid #4267f5;
height: 180px;
width: 500px;
position: relative;
}
.kolom1 {
color: #4267f5;
text-align: center;
}
.kolom2 {
text-align: center;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="kolom1">
<h3>CursusWP</h3>
</div>
<div class="kolom2">
Lorem Ipsum tekst van Arthur
</div>
<div id="bottom">Inhoud onderkant Div</div>
</div>
</body>
</html>
In ons volgende voorbeeld is de inhoud van een uitgelijnd met de onderkant in het midden. We stellen de breedte van de onderste in op “100%”.
<html>
<head>
<title>Titel van het document</title>
<style>
.main {
border: 1px solid #4267f5;
float: left;
height: 180px;
width: 500px;
position: relative;
text-align: center;
}
.column1 {
color: #4267f5;
}
#bottom {
position: absolute;
bottom: 0;
width: 100%;
color: #ffffff;
background-color: blue;
padding: 15px 0;
}
</style>
</head>
<body>
<div class="main">
<div class="column1">
<h3>CursusWP</h3>
</div>
<div class="column2">
Lorem Ipsum tekstje hier.
</div>
<div id="bottom">Inhoud onderkant Div</div>
</div>
</body>
</html>
Voorbeelden uitlijnen van de inhoud
Meer voorbeelden en handleidingen van het uitlijnen van de inhoud naar het midden onderaan:
https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom
https://omarghader.github.io/align-div-to-the-bottom-of-the-page-in-3-steps/
https://www.studytonight.com/css-howtos/how-to-align-content-of-a-div-to-the-bottom-using-css
See the Pen CSS “Always on the bottom” Footer by Chris Bracco (@cbracco) on CodePen.