Hallo,
Warum sollte er auch, du hast ihn nirgends vertikal zentriert, jedenfalls nicht vertikal in deinen Kästchen.
vertical-align bezieht sich bei Blockelementen seit jeher auf die Elemente einer Zeile. Wenn du ein fünf Zeilen hohes Bild in eine Zeile setzt, dann wird der Text bei vertical-align:middle mittig an das Bild gesetzt:
alles klar, line-height anstatt height bringt das gewünschte Ergebnis. Die Logik dahinter würde mich noch interessieren, nicht weshalb es dann funktioniert(das hast Du ausreichend erklärt: Zentrierung innerhalb Zeile), sondern warum das so(zeilen-anstatt block/containerbasierend) angedacht ist?
Vielleicht solltest du auch "alle paar Jahre" mal deinen Browserpark aktualisieren. Firefox 19 hat schon ein paar Tage auf dem Buckel und der IE 10 ist auch von gestern.
Sooo alt ist der IE10 auch noch nicht und ich hinke absichtlich minimal etwas hinterher damit ich das nutze was auch die Mehrheit nutzt. In diesem Zusammenhang wollte ich jetzt mal prüfen was die aktuelle Browserstatistik so hergibt. Allerdings kommt einem dann beim Besuch diverser Seiten der altbekannte Spruch "...traue keiner Statistik, die du nicht selbst gefälscht hast..." in den Sinn, denn zb. "Safari ca. 30%" halte ich doch für etwas übertrieben. Realitätsnäher finde ich da schon: IE ca. 50%
Gruss und Dank an alle,
Mike