6 CSS-trucs om inhoud verticaal uit te lijnen
Laten we het hebben over verticale uitlijning in CSS, of om preciezer te zijn hoe het niet uitvoerbaar is. CSS heeft nog geen officiële manier gegeven om inhoud verticaal in de container te centreren. Het is een probleem dat webontwikkelaars waarschijnlijk overal heeft gefrustreerd. Maar niet te vrezen, in deze post gaan we een aantal trucjes achter je laten die je kunnen helpen imiteer het effect.
Deze trucs kunnen echter beperkingen hebben en dat is misschien ook nodig gebruik meer dan één truc om de illusie te voltooien. Als je een andere truc kent, laat het ons weten in de comments.
1. Gebruik Absolute Positionering
De eerste truc die we hier gaan zien, gebruikt de We stellen eerst de positie van het containerelement in op relatief, vervolgens stellen we de positie van het onderliggende element in 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 is het CSS3 Transform heeft het gemakkelijk gemaakt om inhoud centraal te stellen. CSS3 Transform, in tegenstelling tot de Ervan uitgaande dat we dezelfde HTML-structuur hebben als de voorgaande methode - één ouder, één kindelement - 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. We kunnen ook gebruiken Deze truc is geschikt als u de container niet in een vaste breedte instelt, stel de breedte in op Als u slechts één regel tekstuele inhoud in een container heeft, kunt u de tekst verticaal uitlijnen met behulp van de Vergeet niet dat deze truc alleen werkt met een enkele regel tekst. Als de inhoud in twee of meer regels valt, zou de spatie tussen elke regel dezelfde zijn als die in de 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 De laatste methode voor verticaal centreren 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 toe 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.positie eigendom. Je hebt er twee absoluut. Dit stelt ons in staat om het vrij over de container te plaatsen. absoluut positie beïnvloedt het andere element binnen dezelfde container.2. Gebruik CSS3 Transform
positie eigenschap, heeft geen invloed op de positie van andere elementen binnen dezelfde container.50% van boven en met CSS-transformatie geeft een vertaling van -50%. En daar heb je het.3. Gebruik opvulling
vulling 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:auto.4. Gebruik lijnhoogte
lijnhoogte eigendom. Stel de lijnhoogte waarde voor ongeveer hetzelfde als de containerhoogte, en u ziet de volgende uitvoer.lijnhoogte, ons te veel witruimte geven.5. Gebruik de CSS-tabel
tafel, terwijl het onderliggende element moet worden weergegeven als table-cell gebruik dan de vertical-align eigenschap om tekst verticaal te centreren.6. Gebruik Flexbox
align-items: center; als volgt, en dat is het.
