Выравнивание по вертикали IMG внутри элемента li

Question

Я пробовал все от добавления высоты строки до изменения свойства display на table-cell для li, но почему-то я не могу заставить изображения выравниваться по вертикали.* css:

ul.columns { list-style: none; padding:25px }

ul.columns li {width:180px; height:180px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}

ul.columns li img {margin:auto; display:block;}

http://jsfiddle.net/Sdt8M/3/

оцените помощь, ребята ...

Answer 1

Нужны ли эти изображения для отображения блоков? Если нет, вы можете просто передать эти li s line-height:180px и vertical-align:middle эти изображения.

http://jsfiddle.net/Sdt8M/20/

Answer 2

эй попробуйте это .. Добавьте padding-top:10px к ul.columns li

ul.columns {list-style: none;padding: 25px}

ul.columns li {width:180px; height:180px; padding-top:10px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}

ul.columns li img {margin:auto; display:block;} 

Надеюсь, это поможет вам.

Answer 3

Посмотрите на этот пример http://www.brunildo.org/test/img_center.html