Здравствуйте, суть проблемы:
есть блок .sidebar с такой структурой:
<div class="sidebar">
<div class="menu">
<ul>
<li>
<a href="#">
<img src="#">
<p>Какой-то текст</p>
</a>
</li>
<li>
<a href="#">
<img src="#">
<p>Какой-то текст</p>
</a>
</li> // + еще 100500 таких <li></li>
</ul>
</div>
</div>
Тег a прописан в css как блочный элемент. Высота li динамически устанавливается скриптом. В p находится описание ссылки, состоящее из двух-четырех слов. Таким образом, в некоторых блоках-ссылках это предложение умещается на одной строке, а в некоторых - на двух.
Требуется выровнять блок a вертикально по центру каждого li.
Пробовал задать display: table-cell и vertical-align: middle тегу li
Пробовал задать display: inline-block и vertical-align: middle тегу a
Пробовал еще кучу всего, но ничего не помогает. Подскажите, пожалуйста, что не так с этой разметкой, и как можно решить проблему? На худой конец - хотя бы скриптом.