Pionowe centrowanie obrazków
0 poziom | 13 września 2007, 20:20:45
kategoria:
Techblog
,
Web design
Pionowe centrowanie w CSS to temat wałkowany po wielokroć, w dłuższych bądź krótszych artykułach. Często wywlekane są armaty na muchy, często rozwiązania mają braki w obsłudze dla Internet Explorera, czasem... mniejsza o to. Pionowe centrowanie obrazka w <div>'ach o określonych rozmiarach wykorzystuje się stosunkowo często, a większości przypadków wystarcza bardzo prosta metoda:
HTML:
<div><span></span><img src="..." alt=".../></div>
CSS:
div { line-height: 200px; height: 200px; text-align: center; }
div img { vertical-align: middle; }
Taka konstrukcja działa bezbłędnie w FF, Safari, Operze i IE7. Żeby zadziałała także w IE6 potrzebny jest <span></span> przed obrazkiem, który widać już w powyższym kodzie. Potrzeba także
div span { display: inline-block; }
które najlepiej umieścić w arkuszu warunkowym dla IE6. 99% problemów z centrowaniem da się załatwić w ten prosty, choć czasem nie oczywisty sposób.
