Вертикальное выравнивание img и текст внутри li

Я пытаюсь вертикально выровнять по середине изображение и текст в элементе списка, но не повезло.

например:

<ul>
 <li><img src="somepath" /> sometext
  </li>
<li><img src="somepath2" /> sometext2
  </li>
</ul>

как я могу это сделать? спасибо

Ответы

Ответ 1

Предполагая, что ваши элементы списка имеют фиксированную высоту, вы можете использовать line-height в сочетании с vertical-align: middle для этого.

Пример:

ul li {
    display: block;
    height: 100px;
    line-height: 100px;
}

ul li img {
    vertical-align: middle;
}

Рабочий пример здесь.

Ответ 2

Вы можете использовать свойство CSS "vertical-align" для тега img. Пример:

<style type="text/css">
  img { vertical-align: middle; }
</style>
<ul>
  <li><img src="test.jpg" />test</li>
</ul>

Ответ 3

Если вы знаете высоту изображения (при условии, что это значок), вы можете установить высоту линии на высоту изображения. Затем он должен работать, установив vertical-align:middle. См. Живой пример в w3schools: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align

Ответ 4

Вы должны обернуть текст внутри "li"

<li><div><span>My text</span></div></li>

li div{
    display: table;
    height: 100%;
    width: 100%;
}
li span{
    display: table-cell;
    vertical-align: middle;
}