Как правильно установить vertical-align?

Здравствуйте, суть проблемы:
есть блок .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
Пробовал еще кучу всего, но ничего не помогает. Подскажите, пожалуйста, что не так с этой разметкой, и как можно решить проблему? На худой конец - хотя бы скриптом.
  • Вопрос задан
  • 140 просмотров
Решения вопроса 1
Zhuroff
@Zhuroff Автор вопроса
Всё, нашел решение: display: table-cell и vertical-align: middle тегу a, и такую же высоту, как у тега li.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы