Webelementen positioneren met CSS Vertical Align

Google zoeken









Landschap
Beschrijving






Woud

Lorem ipsum dolor sit amet.






Oceaan

Lorem ipsum dolor sit amet.

De HTML code hierboven maakt een eenvoudige webpagina die vier elementen weergeeft: gekoppelde tekst, een afbeelding, een ingesloten video en een tabel. Het zou er als volgt uit moeten zien in uw browser:

Tekst verticaal uitlijnen

Standaard worden de meeste tekstelementen (zoals koppen,

, en

Sommige tekstelementen, zoals de en tag zijn inline. Als gevolg hiervan ondersteunen ze de eigenschap vertical-align. Om tekst verticaal uit te lijnen, wijst u eenvoudig de juiste waarde toe aan de CSS-eigenschap verticaal uitlijnen.

De verticaal uitgelijnde bovenste waarde op tekst gebruiken

a {
 verticaal uitlijnen: boven;
}

De. toevoegen CSS-code hierboven naar het basis-HTML-document zal de bovenkant van de. uitlijnen tag tekst met de bovenkant van het hoogste element in de regel. Het volgende bijgewerkte scherm produceren:

De procentuele waarde op tekst gebruiken

a {
 verticaal uitlijnen: -50%;
}

De bovenstaande CSS lijnt het tekstelement uit op een positie die 50% onder de basislijn van het bovenliggende element ligt. Het produceert de volgende uitvoer in uw browser:

Zoals u in de bovenstaande afbeelding kunt zien, neemt het tekstelement een positie in onder de afbeeldings- en video-elementen, die zich op dezelfde regel bevinden. Gebruik een positieve procentuele waarde om dit element op of boven de basislijn te plaatsen.

De lengtewaarde op tekst gebruiken

a {
 verticaal uitlijnen: 90px;
}

De bovenstaande code lijnt de basislijn van het tekstelement uit op een lengte van 90px boven de basislijn van het bovenliggende element. Dit levert de volgende uitvoer op in een browser:

Afbeeldingen verticaal uitlijnen

De tag is een inline-element waarmee de CSS-eigenschap vertical-align goed werkt.

De superwaarde voor verticaal uitlijnen op afbeeldingen gebruiken

img {
 verticaal uitlijnen: super;
}

De bovenstaande code plaatst de afbeelding op de superscript-basislijn van het bovenliggende element. Dit betekent op een positie boven de basislijn, zoals u kunt zien in de volgende uitvoer:

Percentagewaarde verticaal uitgelijnd gebruiken op afbeeldingen

img {
 verticaal uitlijnen: 25%;
}

De bovenstaande code lijnt de basislijn van het afbeeldingselement uit op 25% boven de basislijn van het bovenliggende element. Dit levert het volgende spiegeleffect van de superwaarde op:

De lengtewaarde voor verticaal uitlijnen gebruiken op afbeeldingen

img {
 verticaal uitlijnen: 5px;
}

De bovenstaande code lijnt de basislijn van het afbeeldingselement uit op een positie 5px boven de basislijn van het bovenliggende element. Dit levert een effect op dat vergelijkbaar is met dat van de super- en 25%-waarden:

Ingesloten media zoals video's en iframes zijn inline HTML-elementen. Daarom werkt de CSS-eigenschap vertical-align uitstekend met hen.

De verticaal uitgelijnde superwaarde gebruiken op een video

filmpje {
 verticaal uitlijnen: sub;
}

De bovenstaande code plaatst de video op de subscript-basislijn van het bovenliggende element. Dit betekent op een positie onder de basislijn, zoals u kunt zien in de volgende uitvoer:

Percentagewaarde verticaal uitgelijnd gebruiken op een video

filmpje {
 verticaal uitlijnen: -25%;
}

De bovenstaande code lijnt de basislijn van het video-element uit op 25% onder de basislijn van het bovenliggende element. Dit levert het volgende spiegeleffect van de subwaarde op:

De lengtewaarde voor verticaal uitlijnen gebruiken op een video

filmpje {
 verticaal uitlijnen: -5px;
}

De bovenstaande code lijnt de basislijn van het afbeeldingselement uit op een positie 5px onder de basislijn van het bovenliggende element. Dit produceert een effect zoals de sub- en -25%-waarden:

Items in een tabel verticaal uitlijnen

Het gebruik van de eigenschap vertical-align met een tabel is een beetje lastig, omdat een tabel een blokelement is. echter, de

De verticaal uitgelijnde topwaarde gebruiken op tabelgegevens

td {
 hoogte: 40px;
 verticaal uitlijnen: boven;
}

De bovenstaande code voegt een hoogte van 40px toe aan elke cel in de tabel. Vervolgens worden de gegevens in elke cel uitgelijnd met de bovenkant van elke rij. Dit levert de volgende uitvoer op in de browser:

De middelste waarde verticaal uitgelijnd gebruiken op tabelgegevens

td {
 hoogte: 40px;
 verticaal uitlijnen: midden;
}

De middelste waarde verticaal uitgelijnd in de bovenstaande code centreert de gegevens verticaal in elke cel. Het produceert de volgende uitvoer in de browser:

De verticaal uitgelijnde onderste waarde gebruiken in tabelgegevens

td {
 hoogte: 40px;
 verticaal uitlijnen: onder;
}

De bovenstaande code lijnt de gegevens in elke cel uit met de onderkant van elke rij. Het produceert de volgende uitvoer in de browser:

Nu kunt u de elementen op uw webpagina uitlijnen

U kunt nu de CSS-eigenschap verticaal uitlijnen gebruiken met een groot aantal verschillende inline-elementen, waaronder tekst, ingesloten media en tabelgegevens. De algemene regel is dat de eigenschap vertical-align alleen werkt op inline- en inline-block-elementen.

U kunt deze eigenschap echter gebruiken op block-elementen, u hoeft ze alleen eerst te converteren naar inline- of inline-block-elementen. Onthoud dat u verticaal uitlijnen kunt combineren met andere uitlijningseigenschappen, zoals tekstuitlijnen.

Over de auteur

Kadeisha Kean (52 artikelen gepubliceerd)

Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke nieuwe technologie-beginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).

Meer van Kadeisha Kean