Вертикальное выравнивание внутри элементов списка

rbelko · October 11, 2011

Добрый вечер! Вот проблема такая есть, не знаю как сделать. Вот картинка проблемы:

Вот код:


<html>
	<head>
		<style>
			.asd ul li{
				outline: 1px solid black;
				height: 80px;
			}
		</style>
	</head>
	<body>
		<table border="1" align="center" width="200">
			<tr>
				<td>
					<div class="asd">
						<ul>
							<li><a href="#">123</a></li>
							<li><a href="#">sd sdg g456 gf sdgd 4 23 423 423 </a></li>
							<li><a href="#">345</a></li>
							<li><a href="#">456 234 234 234 234 234 23 423 423 </a></li>
							<li><a href="#">567</a></li>
						</ul>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

Задача: вертикально выровнять по середине элементы списка внутри ячейки таблицы.

Спасибо за потраченное время.

SelenIT · October 11, 2011

Вообще-то они по умолчанию выровнены по середине, просто из-за того, что li-шкам зачем-то задана высота, этого не видно . Тривиальное решение — убрать высоту (и бордеры) у li-шек и поставить их td-шкам.

Но вообще создается впечатление, что что-то тут избыточно — либо список, либо (что вероятнее) таблица...

rbelko · October 11, 2011

Вообще-то они по умолчанию выровнены по середине, просто из-за того, что li-шкам зачем-то задана высота, этого не видно . Тривиальное решение — убрать высоту (и бордеры) у li-шек и поставить их td-шкам.
Но вообще создается впечатление, что что-то тут избыточно — либо список, либо (что вероятнее) таблица...

Нет, структура не избыточна, именно такая и должна быть! А высота у li-шек стоит для того, что бы они все были одинаковой высоты. Если высоту убрать, то в той li-шке, где текста будет на несколько строк, высота будет больше, чем у той li-шке, где текста одна строка.

Необходимо найти решение проблемы именно под ту структуру тегов, что я привёл.

Кстати, перечитал что я написал, и понял что я неправильно сформулировал задачу. Вообще задача следующая: отцентрировать по вертикали li-шки по той высоты что для них задана. Как то так

Edited October 11, 2011 by rbelko

Justnewone · October 12, 2011

гуглите "вертикальное выравнивание css кроссбраузерно". Задача стара и ее уже обтесали со всех сторон.

Sign In

Вертикальное выравнивание внутри элементов списка

Question

rbelko

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

rbelko

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information