Вертикальное выравнивание

psywalker · August 3, 2009

Всем доброй ночи, а ситуация следующая:

Есть вот такое вот меню: http://psywalker.ru/Forum/vert.png

Сделано оно таким образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0; list-style: none;}
		ul { text-align: center;}
			ul li { width: 110px;}
			ul li { display: inline-table; vertical-align: middle;}

</style>
</head>

<body>
	<ul>
		<li><a href="#">Одно слово</a></li>
		<li><a href="#">Одно слово</a></li>
		<li><a href="#">Одно слово, под ним другое</a></li>
		<li><a href="#">Одно слово</a></li>
		<li><a href="#">Одно слово, под ним другое</a></li>
		<li><a href="#">Ондо слово</a></li>
	</ul>
</body>
</html>

Задача: Нужно, что-бы в LI всегда было Вертикальное выравнивание, независимо от количества слов, тоесть допустим пусть Пункт меню будет шириной 110px и все слова, которые не помещаются, просто оказывались на нижней строке, но при этом все слова в других пунктах и в этом всегда были выровнены по вертикали (как на рисунке: http://psywalker.ru/Forum/vert.png ).Все Кроссбраузерные Решения, которые я нашёл в Инете - только для Одной строки, а мне надо, чтобы я мог вписывать много слов, даже с переносом на другую строку и что-бы даже в ИЕ6-7 отображалось отлично!

И ещё интересно узнать способы наших экспертов и не только, как Вы решаете эту задачу и что вообще думаете об этом?

Edited August 3, 2009 by psywalker

Justnewone · August 4, 2009

для UL - display:table, для LI - display:table-cell, это для нормальных. Есть еще решение для IE6-7, там участвуют дополнительные контейнеры, с позиционированием и отриц. маргинами в процентах или экспрешеном, например, как тут. Или у гугла, вобщем, именно так все и делают, либо таблицей, чтобы как вы говорите "сделал и забыл" =).

Edited August 4, 2009 by Justnewone

psywalker · August 4, 2009

Justnewone

Спасибо за идею, а вот если например пункты меню должны быть Не фиксированные, то тогда Задавая позиционирование ссылке Пункт схлопывается, но зато вертикальное выравнивание получается. Вот как бы убить двух зайцев для ИЕ6-7?

Justnewone · August 4, 2009

а вот если например пункты меню должны быть Не фиксированные, то тогда Задавая позиционирование ссылке Пункт схлопывается, но зато вертикальное выравнивание получается. Вот как бы убить двух зайцев для ИЕ6-7?

ЧЕты лыжы не едуть... подробнее.

psywalker · August 4, 2009

Если предположим у меня Есть меню, Пункты состоят из Закруглённых углов по бокам и ввехнего фона соответственно, что-бы при растягивании этот пункт тянулся в ширину на сколько угодно. При этом мне нужно, что-бы всё таки начальная задача была соблюдена, а точнее что-бы при переносе слов В Пункте было Вертикальное выравнивание, даже в ИЕ6-7, как на рисунке http://psywalker.ru/Forum/vert.png . Вобщем что-бы тянулось в ширину, да ещё было вертикальное выравнивание!

Justnewone · August 4, 2009

Если предположим у меня Есть меню, Пункты состоят из Закруглённых углов по бокам и ввехнего фона соответственно, что-бы при растягивании этот пункт тянулся в ширину на сколько угодно. При этом мне нужно, что-бы всё таки начальная задача была соблюдена, а точнее что-бы при переносе слов В Пункте было Вертикальное выравнивание, даже в ИЕ6-7, как на рисунке http://psywalker.ru/Forum/vert.png . Вобщем что-бы тянулось в ширину, да ещё было вертикальное выравнивание!

МММ, чета сходу не могу сказать, но абсолют, конечно, никем чувствоваться не будет. Только, наверна, на JS считать и назначать родителю.

psywalker · August 4, 2009

эээх жаль что Great Rash щас нет, он такие штуки как орешки щёлкает

Justnewone · August 4, 2009

эээх жаль что Great Rash щас нет, он такие штуки как орешки щёлкает

Да уж самому бы пора, как бе... Эксперт сетке... )))

psywalker · August 4, 2009

Justnewone

Да уж самому бы пора, как бе... Эксперт сетке... )))

Да согласен конечноже, я сам люблю решать всякие задачки, но вот бывают такие, которые мне не под силу просто. Вот этот пример яркое тому подтверждение, я мучался над решением 2 дня и не смог решить, поэтому и обращаюсь к Вам - экспертам. Потом я себя экспертом не считаю, мне ещё далеко даже до среднего уровня, сам молодой ещё в этом деле, так что далеко не все задачи мне под силу, я только учусь можно сказать Ну и последнее это то, что мне даже бывает просто интересно обсудить и узнать, как опытные ребята делают ту или иную вещь, поделиться и подчеркнуть новые идеи, поучавствовать в дисскусии и т. д.

Fenix · August 4, 2009

Можно постовить

vertical-align: top

а потом опустить вниз слова с помощью padding-top

Sign In

Вертикальное выравнивание

Question

psywalker

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Fenix

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information