垂直对齐李元素里面的IMG

我试过所有事情，从添加行高到改变'显示'属性到'表格单元'到李，但不知何故，我似乎无法让图像垂直对齐。垂直对齐李元素里面的IMG

的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/

感谢帮助家伙...

来源

2011-02-07 carpenumidium

这些图像是否需要块显示？如果没有，你可以给那些li s一个line-height:180px，和vertical-align:middle这些图像。

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

来源

2011-02-07 22:32:11 DanMan

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

来源

2011-02-07 22:17:16

谢谢。希望它肯定会得到答案。实际上我之前读过关于inline-block属性的内容，但是听说它没有完全支持。 – carpenumidium 2011-02-07 22:37:51

哎试试这个.. 添加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;}

希望它能帮助你。

来源

2011-02-07 22:22:30 GitsD

，不会做图像的高度可能会有所不同，这只会增加顶部的空间。感谢anywyas。 – carpenumidium 2011-02-07 22:32:57

尝试用少填充到'ul'并从'li'中删除margin-top并使用填充顶部'li'..试试这个.. – GitsD 2011-02-07 22:41:58

垂直对齐李元素里面的IMG

回答

相关问题