Witam,
mam szybkie pytanko, jak wypośrodkować obrazek w pionie? Przypadek jest taki, że obrazek jest mniejszy niż "powierzchnia klikalna", więc ustaliłem w css odpowiednia wysokosc i szerokosc, wszystko ladnie dziala, tylko ze obrazek wyswietla sie przy gornej krawedzi (rys 1), a nie tak jakbym chcial - na srodku (rys 2). vertical-align: middle nic tu nie zmienia jak widac.

rys 1



rys 2

[HTML] pobierz, plaintext 
<a href="lalala.html'" class="miniaturka"><img src="mini.jpg" alt="" class="img-min"></a>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.miniaturka {
width: 110px; height: 110px; display: inline-block; overflow: hidden; vertical-align: middle;
}
 
.img-min {
vertical-align: middle;
}
[CSS] pobierz, plaintext 

Z gory dzieki za wszelka pomoc!
Pozdrawiam.

spróbuj dodać !important do vertical-align:middle

Nie pomogło, w każdej przeglądarce obrazek jest na górze

http://jsfiddle.net/pEtrm/

zamiast display: inline-block; display: table-cell

super, w firefoxie juz jest dobrze, to teraz pytanie za 100 punktow, co zrobic zeby w ie tez dzialalo? ;(

[HTML] pobierz, plaintext 
 
<style type="text/css">
.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 1000px;
    height: 1000px;
}
.box * {
    vertical-align: middle;
}
</style>
 
<!--[if lt IE 8]>
<style>
.box span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->
 
[HTML] pobierz, plaintext 

Użycie:

[HTML] pobierz, plaintext 
<div class="box"><span></span><img src="1.jpg" /></div>
[HTML] pobierz, plaintext 

Oczywiście wymiary boxu ustawiasz jakie chcesz.