vertikal centrering med CSS, anno 2009
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!