Alex Rivera | Logout

Center single- AND multi-line li text vertically

Asked 2010-11-04T09:10:26.560
19

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%; 
}
Edit
Report

1 Answer

3
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

answered 2010-11-04T09:36:00.197

Your Answer