nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


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 het effect na te bootsen .

Deze trucs kunnen echter beperkingen hebben en het kan zijn dat je meer dan één truc moet gebruiken 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 eigenschap position . Je hebt er twee

, 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.

Hoe iOS 11 Public Beta op iPhone of iPad te installeren

Hoe iOS 11 Public Beta op iPhone of iPad te installeren

Dankzij het Apple Beta Software-programma kun je het aankomende besturingssysteem (iOS, macOS of tvOS) installeren en een voorproefje krijgen van alle functies voor de officiële release.In dit bericht zal ik je stap voor stap helpen - hoe je Apple's volgende versie van het mobiele besturingssysteem, iOS 11 Beta, installeert.

(Technische en ontwerptips)

Maak spraakballonnen op de pagina met Popper.js

Maak spraakballonnen op de pagina met Popper.js

Iedereen weet van tooltips en er zijn tientallen gratis bronnen om u te helpen deze te maken. Bellen met aangepaste berichten of "poppers" zijn echter ook erg handig.Ze zijn niet beperkt tot zweefgebeurtenissen, dus ze kunnen consistent op de pagina worden weergegeven en andere gebruikersgedragingen omzeilen

(Technische en ontwerptips)