Vertically centering text in a list item with line-height but not 100% width

Question

Hi,

Whats the best approach to vertically center text in a li but restrict the text to less than 100% of the li width - in this case, setting the line-height on the li causes the wrapped text to have a massive line spacing (which of course with line-height you are telling it to do):

ul li {
  height: 40px;
  line-height: 3em;
  border-bottom: 1px solid #103d3b;
  padding-left: 10px;
  font-size: 13px;
  background-image: url(images/listarrow.png);
  background-position: right center;
  background-repeat: no-repeat;
}

<ul>
    <li>test 1</li>
    <li>test 2 which is a longer line and needs wrapping</li>
</ul>

Adding a div around the text with width of 80% and a line-height of 1em cancels out the line-height on the li and sends the (now correctly wrapped) text to the top of the li box.

What I want to do is have the text block vertically centered, with a normal line height, regardless of whether the text wraps or not.

Any ideas?

The only browser I am targetting with this is Mobile Safari (iPhone, iPad et al), so I can use solutions which only work on Safari if that is the only way. I don't want to do this in Javascript as that can be very detrimental with large lists.

Regards

Moo

Answer 1

Can't you just throw a margin: 0 auto in there?

Answer 2

This may be a bit over-simplistic, but why not just remove the height on the li and use padding to accomplish everything?

ul li {
  line-height: 1.2em; // standard, good-looking line-height
  border-bottom: 1px solid #103d3b;
  padding: 10px 40px 10px 10px; // padding to accomplish top/bottom spacing (so it's always even) and spacing on right
  font-size: 13px;
  background-image: url(images/listarrow.png);
  background-position: right center;
  background-repeat: no-repeat;
}

I realize you won't get the same row heights for every object in this case, but I still tend to think it will look better. If it is important to maintain an exact row height, the easiest way to achieve dynamic vertical centering in WebKit is to use a wrapper div with properties like this (keeping the height on li and the width on #wrapper as you mentioned before:

ul li {
  display:table;
}
ul li div#wrapper {
  display:table-cell;
  vertical-align:middle;
}