垂直居中单行和多行文本 [英] Center single- AND multi-line li text vertically

查看:124
本文介绍了垂直居中单行和多行文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个无序的列表与背景图像集。所有列表项具有相同的高度,背景图像位于左中心。

I have an unordered list with a background-image set. All list-items have the same height, the background-image is positioned left center.

每个项目的文本应垂直居中李先生。这适用于单行文本(通过根据li的高度设置行高),但不能使用两行文字

The text of each item should be centered vertically to the li. This works well with single-line text (by setting the line-height according to the height of the li), but not with two lines of text.

我可以为两行项添加line-height:normal,但我想要一个适用于所有项目的解决方案。

I could add "line-height:normal" to the two-line item, but I want a solution that works for all items.

这样做吗?

示例:

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标签

I used star hack for brevity, you should avoid. Just use html5boilerplate solution, it uses conditional comments on body tag

这篇关于垂直居中单行和多行文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆