[HTML][CSS]umieszczanie obrazka dokładnie na środku elementu Opcje

[maszti88]

Wczytuje 4 obrazki do elementów listy <li><img ....></li>. Wszystkie obrazki są mniejsze niż 50px ale różnej wysokości.

obecnie mój css wyglada następująco:

ul {
height:50px;
text-align:center;
}

ul li {
height:50px;
}

Chciałbym aby kazdy z tych obrazków który jest w poszczegolnych elementach listy<li> był dokładnie na środku tego elementu. Jak to mozna wystylizować?