Terug

CSS 6 – Uitlijning

Horizontaal uitlijnen

text-align: left;

text-align: center;

text-align: right;

Titel
Ut dolore sint
velit aliqua.
Titel
Ut dolore sint
velit aliqua.
Titel
Ut dolore sint
velit aliqua.

text-align

Standaard worden alle elementen in een vlak linksboven uitgelijnd. Af en toe wil je daar natuurlijk verandering in brengen. De horizontale uitlijning is vrij eenvoudig, dat werkt net zo als in bijvoorbeeld Word. Met text-align kun je aangeven of text, plaatjes, titels, linkjes enzovoorts left, center of right worden uitgelijnd.

Verticaal uitlijnen

display: flex;
align-items: flex-start;

display: flex;
align-items: center;

display: flex;
align-items: flex-end;

Titel
Ut dolore sint
velit aliqua.
 
 
 
 
Titel
Ut dolore sint
velit aliqua.
Titel
Ut dolore sint
velit aliqua.

display: flex

Verticaal uitlijnen is ook niet ingewikkeld, maar heeft net een extra stapje nodig. Verzamel alle inhoud in een nieuwe div (hier in het blauw aangegeven). Geef vervolgens aan het omliggende vlak (hier geel) de eigenschappen display: flex en align-items: flex-start/center/flex-end.

Je kunt nog veel meer met display: flex dan we nu laten zien. Als je daarover wil leren, neem dan eens een kijkje op deze link.

.links
.rechts
.rechts
#extra

.rechts

Plaats de extra div in een div in de buurt van waar het element getoond moet worden:

<div class="links"></div>
<div class="rechts"></div>
<div class="rechts"></div>
<div class="rechts"><div id="extra"></div></div>

Met position:absolute laat je de div boven de pagina ‘zweven’. Door de marge van het element te veranderen verplaats je het element. In dit geval maken we de linker en top marge -100 pixels, waardoor het element 100 pixels naar links en boven gaat.

#extra {
    position: absolute;
    margin-left: -100px;
    margin-top: -100px;    
    width: 150px;
    height: 150px;
}

Hieronder zie je dezelfde code nog een keer, maar nu is de div rond gemaakt en is er een achtergrondafbeelding in gezet.

.links
.rechts
.rechts

.rechts

#extra {
    position: absolute;
    margin-left: -100px;
    margin-top: -100px;    
    width: 150px;
    height: 150px;
    background-image: url(plaatje.jpg);
    background-size: 100%;
    border-radius: 50%;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}