将单行和多行 li 文本垂直居中

发布于 2024-09-30 17:33:53 字数 406 浏览 0 评论 0原文

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

每个项目的文本应该垂直居中到li。这适用于单行文本（通过根据 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%; 
}

原文

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

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.

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

How can I do this?

Example:

li { 
    list-style-type:none; 
    padding-left:40px; 
    height:36px;
    line-height:36px; 
    background:url('tick.png') no-repeat 0 50%; 
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哭了丶谁疼 2024-10-07 17:33:53

这是一个最跨浏览器的解决方案

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

<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 标签上使用条件注释

this is a most crossbrowser solution

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

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

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

回复收藏 0 原文

温柔女人霸气范 2024-10-07 17:33:53

li {
    height:200px; 
    line-height:200px;
    border:1px solid red;
}
li span {
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2;
}

<li>
    <span>two<br />lines</span>
</li>

它应该有效。

编辑：更新以查看更改

li {
    height:200px; 
    line-height:200px;
    border:1px solid red;
}
li span {
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2;
}

<li>
    <span>two<br />lines</span>
</li>

It should work.

EDIT : updated to see changes

回复收藏 0 原文

~没有更多了~