Выравнивание по вертикали нескольких строк текста в IE7

Question

Я пытаюсь выровнять текст по вертикали, в IE7 оказывается PITA без опций css display: table; и display: table-cell;

Это для навигации, которая выглядит примерно так:

<ul>
    <li><a href="#"><span>Text covers one line</span></a></li>
    <li><a href="#"><span>Text covers two lines, problem occurs</span></a></li>
</ul>

CSS:

ul li a{ display: table; zoom: 1; width: 240px; height: 30px;}
ul li a span{ width: 200px; display: table-cell; zoom: 1; vertical-align: middle; padding: 0 30px 0 20px; } 

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

Answer 1

CSS вызывает слишком большой отступ UL в IE

Удаление естественного отступа также исправляет проблемы выравнивания в IE7 / 8.Если вам нужно скрыть тип стиля списка, просто используйте стиль margin:0; padding:0;.

ul {margin:0; padding:0; list-style-position:outside;}
li {list-style-type:none;}

Answer 2

Есть два решения, которые я знаю, но у каждого есть свой небольшой дискомфорт. Пожалуйста, посмотрите на эту демонстрационную скрипку , показывающую оба.

Первое решение основано на этом ответе , недостатком которого является то, что интерактивная область сжимается только до текста и не распространяется на границы элементов списка. Я полагаю, это не будет большой проблемой, поскольку пользователи, скорее всего, будут щелкать текст, а не рядом с ним.

Второе решение основано на этом ответе , который имеет обратную сторону: вам нужен один дополнительный элемент в разметке. Я выбрал тег <ins>, но вы можете использовать любой другой встроенный элемент.

Answer 3

Я знаю, что здесь много табличной ненависти (и многое явно оправдано).Но вы должны поддерживать IE7 как требование - очевидно, мы не собираемся использовать новейшие технологии здесь.

Итак, если вы не можете заставить его работать с ограниченным набором CSS, почему бы просто не использовать таблицу?1008 * будут компромиссы.Мне больно говорить следующее: иногда нужно сделать глубокий вдох, выбросить в окно стандарт и подумать: «Если это работает, то работает».

Answer 4

Если я правильно понимаю вашу задачу, использование таблиц абсолютно не нужно.Основная причина этого заключается в том, что если у вас есть количество элементов li, которое превышает ширину вашей страницы, у вас определенно возникнут проблемы с тем, чтобы сделать их красиво обернутыми.

Итак, вы пытаетесьдля достижения?

http://jsfiddle.net/EK357/

Решение основано на: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Чтобы сократить его, вы должны установить эти правила для каждого элемента li:

li {
    display: inline-block;
    display: -moz-inline-box; /* Firefox < 3.5 */
    *display: inline; /* IE */
    zoom: 1;

    vertical-align: middle;
    margin-right: -.3em;
}

Имейте в виду, что после каждого элемента inline-block есть дополнительный пробел (вот для чего margin-left: -.3em.