Вертикальное центрирование текста в элементе списка с высотой строки, но не шириной 100%

Question

Что является лучшим подходом для вертикального центрирования текста в li, но ограничивает текст до 100% ширины li - в этом случае установка высоты строки для li приводит к огромному межстрочному интервалу для текста (что, конечно, с высотой строки вы говорите, чтобы сделать это):

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>

Добавление div вокруг текста с шириной 80% и высотой строки 1em отменяет высоту строки в li и отправляет текст (теперь правильно упакованный) в верхнюю часть поля li.

Я хочу, чтобы текстовый блок располагался вертикально по центру, с нормальной высотой строки, независимо от того, переносится текст или нет.

Есть идеи?

Единственный браузер, на который я нацеливаюсь, это Mobile Safari (iPhone, iPad и др.), Поэтому я могу использовать решения, которые работают только в Safari, если это единственный способ. Я не хочу делать это в Javascript, поскольку это может быть очень вредно для больших списков.

Привет

Moo

Answer 1

Это может быть немного упрощенно, но почему бы просто не удалить высоту на li и использовать отступы для достижения всего?

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

Я понимаю, что вы не получите ту же строкувысоты для каждого объекта в этом случае, но я все еще склонен думать, что он будет выглядеть лучше.Если важно поддерживать точную высоту строки, самый простой способ добиться динамического вертикального центрирования в WebKit - это использовать div-обертку с такими свойствами (поддерживая высоту на li и ширину на #wrapper, как вы упоминали ранее:

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