在 li 元素内垂直对齐 IMG
我已经尝试了从添加行高到将“显示”属性更改为“表格单元格”再到 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;}
感谢大家的帮助...
I've tried everything from adding line-height, to changing the 'display' property to 'table-cell' to the li, but somehow i cant seem to get the images to be vertically aligned.
the 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;}
appreciate the help guys...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这些图像需要分块显示吗？如果没有，您可以只提供
lisaline-height:180px和vertical-align:middle这些图像。http://jsfiddle.net/Sdt8M/20/
Do those images need block display? If not, you can just give those
lis aline-height:180px, andvertical-align:middlethose images.http://jsfiddle.net/Sdt8M/20/
看一下这个示例 http://www.brunildo.org/test/img_center.html
Have a look at this example http://www.brunildo.org/test/img_center.html
嘿试试这个..
将
padding-top:10px添加到ul.columns liul.columns { list-style: none; padding:25px }
希望对您有帮助。
hey try this..
Add
padding-top:10pxtoul.columns liul.columns { list-style: none; padding:25px }
Hope it will help you.