6 CSS-trucs om inhoud verticaal uit te lijnen

, de ene is de container, de andere, het onderliggende element dat de inhoud bevat.

We stellen eerst de positie van het containerelement in op relatief, vervolgens stellen we de positie van het onderliggende element in op absolute . Dit stelt ons in staat om het vrij over de container te plaatsen.

Als u de lijn verticaal wilt uitlijnen, verplaatst u de positie van het onderliggende element vanaf de bovenkant, met de helft van de hoogte van de container en trekt u deze omhoog met de helft van de breedte van het onderliggende element. Dit is de uitvoer:

Deze truc is perfect als er slechts één kindelement is, anders heeft de absolute positie invloed op het andere element in dezelfde container.

2. Gebruik CSS3 Transform

CSS3 Transform heeft het gemakkelijk gemaakt om inhoud centraal te stellen. CSS3 Transform heeft, in tegenstelling tot de eigenschap position, geen invloed op de positie van andere elementen binnen dezelfde container.

Ervan uitgaande dat we dezelfde HTML-structuur hebben als de voorgaande methode - één bovenliggend element, één onderliggend element - 50% boven en CSS-transformatie gebruikt, geeft een vertaling van -50% . En daar heb je het.

Houd er echter rekening mee dat CSS3 Transforms niet zal werken in Internet Explorer 8 en lager. Misschien wil je een van de andere methoden hier gebruiken als een terugval.

3. Gebruik opvulling

We kunnen padding ook gebruiken om een ​​illusie van verticale uitlijning te creëren. Om dit te doen, stelt u simpelweg de boven- en onderkant van de padding als volgt in:

Deze truc is geschikt als u de container niet in een vaste breedte instelt, stel de breedte in op auto .

4. Gebruik lijnhoogte

Als u slechts één regel tekstuele inhoud in een container heeft, kunt u de tekst verticaal uitlijnen met behulp van de eigenschap line-height . Stel de line-height waarde in op ongeveer dezelfde hoogte als de containerhoogte, en u ziet de volgende uitvoer.

Vergeet niet dat deze truc alleen werkt met een enkele regel tekst. Als de inhoud in twee of meer lijnen wordt onderverdeeld, zou de afstand tussen elke regel dezelfde zijn als die we hebben opgegeven in de line-height, waardoor we te veel witruimte hebben.

5. Gebruik de CSS-tabel

Persoonlijk is het gebruik van CSS-tabel mijn favoriete truc voor het toepassen van verticale uitlijning. Het werkt in oude browsers zoals Internet Explorer 8. Deze methode wordt gedaan door de weergave van het containerelement in te stellen op de table, terwijl het onderliggende element als een table-cell moet worden weergegeven en vervolgens de eigenschap vertical-align om tekst verticaal te centreren.

6. Gebruik Flexbox

De laatste methode om verticaal centreren toe te passen, is met behulp van Flexbox. Flexbox is een nieuwe module in CSS3. Het biedt een meer directe methode voor het afstemmen van inhoud. Als u de inhoud verticaal in de flexibele box wilt centreren, voegt u eenvoudig align-items: center; als volgt, en dat is het.

Houd er rekening mee dat Flexbox sommige browsers alleen gedeeltelijke gedeelten van de Flexbox-module ondersteunen, zoals Internet Explorer 10, Safari, 6 en Chrome 27 en lager. Dus, vergelijkbaar met de truc met CSS3 Transform, zorg ervoor dat het effect mooi in deze browser valt.