Поблагодарить:
Четверг, 05 Июль 2018 14:59

vertical-align не работает на тег li

Работая с одним из сайтов, возникла необходимость отцентрировать по вертикали текст в списке. Всё усложнялось ещё тем, что у каждого элемента был свой собственный list-style-image. Усложнялось, потому что всякие попытки установить свойство display приводило к тому, что изображение списка просто пропадало.

Решил задачу включением контейнеров div в конструкцию, да, быть может, найдутся сторонники мнения, что, дескать, нехорошо так делать и нужно до конца пытать li, однако мне важен результат, а результата я добился. Было ещё альтернативное решение вообще всё сделать div’ами или вперемешку с img, но тем не менее итоговая конструкция выглядела так:

   <ul>
     <li class="li_01"><div class="list">текст-1</div></li>
     <li class="li_02"><div class="list">текст-2</div></li>
     <li class="li_03"><div class="list">текст-3</div></li>
     <li class="li_04"><div class="list">текст-4</div></li>
     <li class="li_05"><div class="list">текст-5</div></li>
   </ul>

Запись в стилях выглядела так:

.list{display: inline-block;vertical-align: top;height: *размер изображения list-style*}

ul .li_01{list-style-image:url("../image01.png");}
ul .li_02{list-style-image:url("../image02.png");}
ul .li_03{list-style-image:url("../image03.png");}
ul .li_04{list-style-image:url("../image04.png");}
ul .li_05{list-style-image:url("../image05.png");}

Меня "спасла" именно такая конструкция, vertical-align: middle; от значения "по умолчанию" ничем не отличался.

Спонсоры: