我有一个无序的列表与背景图像集。所有列表项具有相同的高度,背景图像位于左中心。
每个项目的文本应该垂直居中。这对单行文本(通过根据li的高度设置行高)而不是两行文本。
我可以在两行项目中添加“line-height:normal”,但是我想要一个适用于所有项目的解决方案。
我该怎么做?
例:
li { list-style-type:none; padding-left:40px; height:36px; line-height:36px; background:url('tick.png') no-repeat 0 50%; }
解决方法
这是一个最流行的解决方案
li { width : 200px; line-height : 100px; height : 100px; border : 1px blue solid; } li span { display : -moz-inline-Box; /* FF2 or lower */ display : inline-block; /* FF3,Opera,Safari */ line-height : normal; vertical-align : middle; } li span { *display : inline;} /* haslayout for IE6/7 */
HTML
<ul> <li><span>My text</span></li> <li><span>My longer text</span></li> <li><span>My text,but this time is really wide</span></li> <li><span>My text,some thoughts about how much it will expand in this item.</span></li> </ul>
为了简洁,我使用了star hack,你应该避免。只要使用html5boilerplate解决方案,它将使用body标签上的条件注释
原文地址:https://www.jb51.cc/css/218476.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。