Inhoud Div element uitlijnen naar beneden css html

Logo cursus traing wordpress

Inhoud Div element uitlijnen naar beneden css html

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 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 “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


  

CursusWP

Lorem Ipsum tekst van Arthur
Inhoud onderkant Div

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 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:


  
    Titel van het document
    
  
  
    

CursusWP

Lorem Ipsum tekst van Arthur
Inhoud onderkant Div

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%”.


  
    Titel van het document
    
  
  
    

CursusWP

Lorem Ipsum tekstje hier.
Inhoud onderkant Div

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.


Meer weten over Inhoud Div element uitlijnen naar beneden css htmlof info?

Wil je meer informatie? Veel bezoekers met interesse in Inhoud Div element uitlijnen naar beneden css html bekeken ook de onderstaande handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress website of webshop beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Inhoud Div element uitlijnen naar beneden css html?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Inhoud Div element uitlijnen naar beneden css html en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven