Вертикальное выравнивание многострочных li

Есть такой список :

<ul class="nav">

<li class="nav-item"><a href="link"><span >СУДЬБА КЕДРА - <br />СУДЬБА МАМОНТА</span></a></li>

<li class="nav-item"><a href="link"><span >СУДЬБА КЕДРА - <br />СУДЬБА МАМОНТА</span></a></li>

<li class="nav-item"><a href="link"><span >ЗАКАТ ЕВРОПЫ</span></a></li>

</ul>

Как видно строка в li разбита тегом <br />

Поэтому если задать для li например -

line-height:50px; vertical-align:middle; 

то вторая строка элемента списка естественно уйдет ниже 50px

Как можно вертикально выровнять элементы такого списка ?

Для А попробуйте поставить высоту строки обычную. если я правильно понял, то line-height нужен только для растягивания ли-шки?

madcoding, естественно line-height:normal не дает никакого эффекта

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

mirekua, а погуглить никак? Правда придется вводить еще один вложенный span (первая ссылка) ссылка

Ну или вот так ссылка

madcoding, просто необходимо выровнять текст в li не только по горизонтали но и по вертикали
Вот весь код:

ul.nav{

list-style:none;

padding:0; margin:0;

min-width:100px;

width:auto;

text-align:center;

}


li.nav-item a

{

width:100%;

height:64px;

color:#000099;  background:#ECECEC;

}

Ширина ul class="nav" width:auto; так как он является второй резиновой колонкой

TitokR, я гуглил естественно.

С display:table-cell работает вертикальное выравнивание. Это то, что предлагается в большинстве ссылок по Вашим запросам также

Но тогда перестает работать width:100%; и элемент списка растягивается только на ширину текста в нем

mirekua, дайте пожалуйста ссылку на рабочий вариант верстки, постараюсь помочь.
P.S. Какая нужна кроссбраузерность?

Сайт у меня на локальной машине. Я конечно упростил весь код. Но даже без упрощений он такой :

<div id="featured" >

			  <!-- First Content -->


	 		  <div id="fragment-0" class="ui-tabs-panel" style=""> <img src="/images/stories/71_kmlq8fdd-234_150_100.jpg" alt="СУДЬБА КЕДРА - <br />СУДЬБА МАМОНТА" width='300' height='191'/>				<div class="info" >


				  <h2><a href="/index.php?option=com_content&amp;view=article&amp;id=71:lorem-ipsum&amp;catid=1:main-events" >СУДЬБА КЕДРА - <br />СУДЬБА МАМОНТА</a></h2>


				  <p>

					<div class="highslide-gallery">

<p style="text-align: justify;">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, se...

</div>


				  </p>


				</div>


			  </div>  




     <ul class="ui-tabs-nav">

  				<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-0"><a href="#fragment-0"><span>СУДЬБА КЕДРА - <br />СУДЬБА МАМОНТА</span></a></li>


				<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>СУДЬБА КЕДРА - <br />СУДЬБА МАМОНТА</span></a></li>


				<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2"><a href="#fragment-2"><span>ЗАКАТ ЕВРОПЫ</span></a></li>


  </ul>


</div>

То есть по сути то же самое. Необходима поддержка минимум IE7

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

п.с. ни разу за все время работы в этой области не возникало подобных трудностей. зато запомнил одну простую истину - причина всегда в мелочах.

mirekua, согласен с madcoding - выложите где нибудь архив с каркасом верстки и нужным списком.

Во первых код, который я выложил в качестве оригинала кроме прочего генерируется php скриптом.

Во вторых я например нашел сейчас еще такое решение:

<li class="nav-item">

<a href="link"><span style="display:block; position:relative; top:25%">СУДЬБА КЕДРА - <br />СУДЬБА МАМОНТА</span></a>

</li>

То есть если span-у задать position:relative; top:25% все отлично выравнивается по вертикали во всех браузер в т.ч. и в IE6 даже.
Правда в IE6 блок со списком падает вниз. Но тем не менее выравнивание по горизонтали, ширина и выравнивание по вертикали работают.

Но в этом способе недостатком является то, что ЗАКАТ ЕВРОПЫ выровнен не по центру вертикали.

То есть top:25% выравнивает блок по вертикали в рассчете на то, что он состоит из двух строк

А если там одна строка то она располагается естественно выше линии центра.


Хотя можно оставить так.

Или можно решить эту проблему программно при загрузке этой страницы.


Решение работает практически во всех браузерах

А вот так не пойдет? ссылка
Для того чтобы увидеть работу - нужно увеличить/уменьшить ширину браузера (в IE7 - нужно еще делать рефреш страницы).

TitokR, в моем примере <ul class="nav"> является второй резиновой колонкой идущей после фиксированной.
Соответственно с Вашим

.parent {

background: #3399FF;

display: table-cell;

height: 40px;

vertical-align: middle;

color: #fff;

}

Съезжает выравнивание текста по горизонтали. Но при этом работает выравнивание текста по вертикали

При чем не обязательно делать выравнивание с помощью доп блока div

Можно и span-у задать

display:table-cell; position:relative; height:64px; vertical-align:middle;

И будет такой же результат

Ширина <li class="nav-item"> резиновая

Вот поэтому я и просил рабочий пример. Хотя честно говоря не понял какая разница какой по счету идет резиновая колонка. Я показал пример резиновой колонки.

Первая колнка ui-tabs-panel имеет такие стили :

<!-- First Content -->


ui-tabs-panel{

	display:inline-block; 

	width:300px;

	background:#999; position:relative;

	float:left;


}

Больше в коде ничего по сути нет, что могло бы влиять на второй резиновый блок

Цитата ("TitokR"):

Хотя честно говоря не понял какая разница какой по счету идет резиновая колонка.

Ну она расположена не слева от фиксированного блока, а справа

mirekua, а зачем

 display:inline-block; 

   float:left;

вот эти два одновременно? не проще флоут назначить контейнеру? а списку инлайны?

Цитата ("madcoding"):

а зачем

Ну положим display:inline-block; там просто лишнее.

Но он никак не влияет на проблему.

float:left; необходим для того, что-б один блок был фиксированный и после него резиновый были в одной строке

И честно говоря проблему я уже решил с помощью нескольких строк кода на php усовершенствовав предложенный мной вариант.

Теперь не зависимо от к-ва строк в li тект корректно отображается точно по центру как по вертикали так и по горизонтали.


Но конечно интересно и решение на уровне верстки. Просто на будущее

mirekua, ссылка и все же я не понимаю в чем проблема.

Цитата ("TitokR"):

и все же я не понимаю в чем проблема

Ваше решение все же не работает в IE6

Но и мое не совсем.

А главное проблема была в том, что код шаблона элементов в моем примере генерируется php скриптом

И изменять весь скрипт мне не хотелось. Да и проблематично

Цитата ("mirekua"):

Ваше решение все же не работает в IE6

Цитата ("mirekua"):

Необходима поддержка минимум IE7