CSS & vertical-align: middle - Wyśrodkowanie obrazka w pionie wewnątrz elementu div

Atrybut stylów CSS vertical-align, może sprawiać problemy, jeśli nie do końca wie się w jakim kontekście go używać w sposób poprawny. Chciałbym na łamach strony podzielić się bardzo prostym przykładem jego użycia, polegającym na wycentrowaniu w pionie obrazka wewnątrz div-a.

W jakim kontekście działa vertical-align?

Atrybut stylu vertical-align, działa w obrębie jednej linii tekstowej - jest to kluczowa informacja pozwalająca zrozumieć zachowanie elementów obdarzonych tym stylem, jak i umiejętne go stosowanie. Spójrzmy na poniższy przykład:

Jak widzimy, pomimo że obrazek opatrzony jest stylem "vertical-align: middle;", nie znajduje się on w centrum div-a. Jak już wspomnieliśmy, atrybut ten spróbuje wyrównać obrazek do środka linii tekstu, która ma znacznie mniejszą wysokość niż sam obrazek. I w tym problem. Możemy jednak przypisać naszej warstwie, zdefiniowaną przez nas wysokość linii. Jeśli przydzielimy jej wartość równą wysokości div-a, wtedy osiągniemy zamierzony cel - obrazek zostanie wyrównany do środka w pionie, i znajdzie się w samym centrum ramki. Zerknijmy więc, czy tak faktycznie będzie:

Jest tak, jak założyliśmy przed chwilą. Zatem w ten prosty sposób możemy wycentrować w pionie elementy strony, używając jedynie CSS-a.