6 CSS-trick för att justera innehållet vertikalt

Låt oss prata om vertikal anpassning i CSS, eller för att vara mer exakt hur det inte går att göra. CSS har ännu inte tillhandahållit ett officiellt sätt att centrera innehåll vertikalt i sin behållare. Det är ett problem som troligen har frustrerad webbutvecklare överallt. Men inte att frukta, i det här inlägget kommer vi att driva några knep som kan hjälpa dig imitera effekten.

Dessa knep kan dock ha begränsningar, och det kan du behöva använd mer än ett trick för att slutföra illusionen. Om du känner till något annat trick, låt oss veta i kommentarerna.

1. Använd absolut positionering

Det första trick vi ska se här använder placera fast egendom. Du har två

, en är behållaren, den andra, barnelementet som innehåller innehållet.

Vi ställer först in behållarelementets position till relativ, så ställer vi in barnelementpositionen absolut. Detta gör att vi kan placera det fritt över behållaren.

För att justera det vertikalt, flytt barnelementets läge från toppen, med hälften av behållarens höjd och dra upp den med hälften av barnets elementbredd. Här är utgången:

Detta trick är perfekt när det bara finns ett enda barnelement, annars absolut position kommer att påverka det andra elementet i samma behållare.

2. Använd CSS3 Transform

CSS3 Transform har gjort det enkelt att sätta innehåll i mitten. CSS3 Transform, till skillnad från placera egendom, påverkar inte positionen för andra delar i samma behållare.

Antag att vi har samma HTML-struktur som föregående metod - en förälder, ett barnelement - 50% från början och med hjälp av CSS-transform ger en översättning av -50%. Och där har du det.

Tänk på att CSS3 Transforms inte fungerar i Internet Explorer 8 och senare. Du kanske vill använda någon av de andra metoderna här som en återgång.

3. Använd padding

Vi kan också använda stoppning för att skapa en illusion av vertikal anpassning. För att göra det, sätt helt enkelt den övre och undre polstret på följande sätt:

Detta trick passar för när du inte sätter behållaren i en fast bredd, sätt bara bredden till bil.

4. Använd linjens höjd

Om du bara har en enda rad textinnehåll i en behållare kan du justera texten vertikalt med hjälp av radavstånd fast egendom. Ställ in radavstånd värde för ungefär samma som behållarens höjd, och du får se följande utmatning.

Kom ihåg att det här tricket bara fungerar med en enda textrad. Om innehållet bryts in i två eller flera rader, kommer utrymmet mellan varje rad att vara som vi angivit i radavstånd, ger oss för mycket blankutrymme.

5. Använd CSS-tabellen

Personligen använder CSS-tabellen mitt favorittrick för att applicera vertikal anpassning. Den fungerar i gamla webbläsare som Internet Explorer 8. Den här metoden görs genom att ställa in behållarelementets display till tabell, medan barnelementet ska visas som tabell-cell använd sedan vertikal-align egenskap för att centrera text vertikalt.

6. Använd Flexbox

Den sista metoden för vertikal centrering är att använda Flexbox. Flexbox är en ny modul i CSS3. Det ger en enklare metod för att anpassa innehållet. För att centrera innehållet vertikalt i flexbox, lägg till align-items: center; som följer, och det är det.

Tänk på att Flexbox vissa webbläsare bara stöder delfunktioner i Flexbox-modulen, till exempel Internet Explorer 10, Safari, 6 och Chrome 27 och senare. Därför, liknar tricket med CSS3 Transform, se till att effekten faller snyggt i den här webbläsaren.