在li元素内垂直对齐IMG

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 line-height:180px提供vertical-align:middle和{{1}}这些图片。

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

Answer 2

看一下这个例子http://www.brunildo.org/test/img_center.html

Answer 3

嘿试试这个.. 将padding-top:10px添加到ul.columns li

ul.columns {list-style：none;填充：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;} 

希望它会对你有所帮助。