En av mina populäraste sidor enligt google är min utvärdering av vertikal centrering med CSS. Jag har sedan en tid känt att det inlägget inte är riktigt komplett, då det saknas handfast kod på hur det praktiskt går till att skapa vertikal centrering för alla webbläsare, till och med IE6. Nyfikna läsare måste läsa hela min text och klicka sig vidare i en länk längst ner, och gissa sig fram till koden. Inte så schysst. Istället för att uppdatera inlägget kompletterar jag med ett nytt, som visar hur en praktisk CSS-klass valignfix skapas, men också hur CSS-koden kan användas på enstaka element.
HTML-kod att utgå från¶
Min följande CSS-kod utgår från en HTML-kod, bara för att visa ett exempel.
<div class="valignfix">
<div>
<div>
<h1>Vertikalt centrerad</h1>
<h2>Jag ligger minsann i mitten!</h2>
</div>
</div>
<img src="matterhorn.jpg" alt="Matternhorn, ett högt berg">
</div>
HTML-koden ser ut så baserat på en rad förutsättningar och beslut baserade på god semantik och skalbarhet.
valignfixanvänds för att skapa ett återanvändbart macro, i stil med clearfix.- Inga onödiga klassnamn eller ID.
- Den första
<div>innehåller det innehåll som ska positioneras vertikalt. För att underlätta gruppering och få det att fungera i IE6 och IE7 läggs innehållet i ytterligare en<div>. - Tätt följt av det centrerade innehållet är det innehåll som är högt, i exemplet en bild. Men det kan lika gärna vara något annat, t ex en meny.
CSS-tabeller sätter hjulet i rullning¶
För alla moderna webbläsare finns ett utbrett och redan beprövat stöd för CSS-tabeller. Genom att använda display:table och display:table-cell är vi mer än halvvägs.
*.valign {
display:table-row;
}
*.valign > * {
width:50%;
display:table-cell;
vertical-align:middle;
}
Ovanstående lösning är fullt tillräcklig för Internet Explorer 8+, Firefox 2+, Opera 8+ och Safari 2+. Vi har de roliga kvar: IE7 och IE6.
IE7 och IE6 löser det med positionering¶
Vid utvecklingen av IE7 prioriterade Microsoft upp CSS2 selektorer och allvarliga renderingsbuggar, men stödet för CSS-tabeller uteblev. Med hjälp av ett CSS filter för de båda webbläsarna går det att göra en liknande lösning med en blandning av absolut och relativ positionering. Både IE6 och IE7 fungerar med stjärna HTML hacket, den osynliga wrappern kring <html>.
* html *.valign,
*+html *.valign {
position:relative;
overflow:auto;
}
* html *.valign div,
*+html *.valign div {
position:absolute;
top:50%;
}
* html *.valign div div,
*+html *.valign div div {
position:relative;
top:-50%;
}
* html *.valign div div *,
*+html *.valign div div * {
position:static;
top:0;
}
/* gör bilden eller annat högt element till float. */
* html *.valign img,
*+html *.valign img {
float:right;
}
Det linkar, men är inte identisk¶
Värt att ha i åtanke är att lösningen för IE7 och IE6 är inte fullt så användbar och skalbar som CSS tables.
- Det höga objektet måste vara definierat i förväg för att något innehåll överhuvudtaget ska kunna centreras.
- Det höga objektet måste anpassas med floats för att ligga till höger eller vänster.
- Det vertikalt centrerade innehållet kan behöva extra positions-CSS för att ligga rätt, vilket kan innebära att dimensionerna på det höga objektet måste vara bestämt.
Det täpper likväl igen hålen i de flesta fall där vertikal centrering är önskvärt. Koden validerar och kan säkert användas i samma CSS-fil, även om jag personligen föredrar att gömma IE-kod i en egen CSS-fil som infogas via Conditional Comments Den är framtidssäker, då använt CSS filter upphör att fungera fr o m IE8 där CSS tables fungerar korrekt.
Och där har vi det. En ren CSS-lösning för vertikal centrering. Ta en titt i exempelfilen för att se resultatet. Jag har en rikligt dokumenterad version och en kompakt version för produktion att ta del av vid intresse!