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

bookworm · February 11, 2011

Приветствую. Никак не могу добиться выравнивания текста, находящегося в элементах списка, по вертикали по середине.

Не трогая html разметку, только средствами CSS. Возможно? Подскажите пожалуйста.

Цель:

Без задания индивидуальных отступов и прочих параметров для элементов списка.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>baby</title>
	<style type="text/css" media="screen">
	<!--
	html, body {height: 100%; padding: 0;}
	div.header_1 {margin: 0 auto; padding: 0; width: 980px; height: 168px; background-color: green;}

	div.header_2 {margin-top: 30px; margin-left: 253px;}
		div.header_2 > ul  > li {float: left; margin: 0;  padding: 0; list-style:none; width: 145px; background: red; margin-right: 2px; text-align: center;}
				div.header_2 > ul  > li > a > img {float: right; padding: 0; margin: 0; border: 0; }
				div.header_2 > ul  > li  > a > span {color: #FFFFFF; font-family: Arial; font-size: 18px;  background: blue;}

	-->
	</style>
</head>
<body>
<div class="header_1">
<div class="header_2">
<ul>
	<li>
		<a href="/">
			<img src="http://bookworm.ru/misc/icon.gif" alt="" width="65" height="65" /> 
			<span>текст</span>
		</a>
	</li>
	<li>
		<a href="/">
			<img src="http://bookworm.ru/misc/icon.gif" alt=""  width="65" height="65" /> 
			<span>текст</span>
		</a>
	</li>
	<li>
		<a href="/">
			<img src="icon.gif" alt=""  width="65" height="65" /> 
			<span>длинный текст</span>
		</a>
	</li>

</ul>
</div>
</body>
</html>

Vlad · February 11, 2011

Для однострочного текста можно указать line-height: 65px, но для двухстрочного это катастрофа будет. Рекомендую для текста и картинки inline-block использовать, тогда можно выравнивание задавать через vertical-align.

swetlana · February 11, 2011

inline-block же ослы понимают туго. Не лучше ли display:table-cell?

klierik · February 11, 2011

inline-block под ИЕ можно создать а вот table-cell как??

swetlana · February 11, 2011

klierik, а разве какие-то проблемы?

Пойду переворачивать свои старые работы. Где-то такое было — точно помню.

SelenIT · February 11, 2011

Тоже буду безумно благодарен за простое решение table-cell в IE. Потому что максимум, чего смог добиться я — это вот такой жуткий ужас...

  padding-top:expression(
	this.tmp=document.body.createTextRange(),
	this.tmp.moveToElementText(this),
	this.tmp=(clientHeight - this.tmp.boundingHeight)/2,
	runtimeStyle.height=clientHeight-this.tmp+'px',
	runtimeStyle.paddingTop=this.tmp+'px'
  );

Lucky_13 · February 11, 2011

inline-block под ИЕ можно создать а вот table-cell как??

klierik, а разве какие-то проблемы?

IE понимает табличные свойства только с восьмой версии. Если же требуется IE6, IE7, то придется использовать для них развилки.

novicheG · February 11, 2011

Дак вот же есть неплохое решение, или оно не подходит?

SelenIT · February 11, 2011

novicheG, ТС просит

Не трогая html разметку, только средствами CSS

а в том решении — дополнительный элемент-хелпер...

swetlana · February 11, 2011

inline-block под ИЕ можно создать а вот table-cell как??

а ведь я ввожу в заблуждение.

Прошу прощения.

Сейчас смотрю старые проекты — да, много где использован table-cell, но IE везде игнорируется.

novicheG · February 11, 2011

novicheG, ТС просит
а в том решении — дополнительный элемент-хелпер...

блин.. только экспрешены..

bookworm · February 12, 2011

Спасибо всем за ответы, но у меня до сих пор не получилось даже для FF сделать.

Если у li ставить table-cell, то vertical-align у span все равно не работает...

psywalker · February 12, 2011

Да ладно, скажите тоже) Вот неплохой способ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Вертикальное выравнивание</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">


#wrap {
	border: 1px solid #000; 
	height: 200px;
	padding-right: 200px;
}
	.left { 
		height: 100%; 
		display: table;
		background: blue;
		width: 100%;
	}
	p {
		text-align: center; 
		display: table-cell; 
		vertical-align: middle;

	}
	.img { 
		width: 200px; 
		height: 200px; 
		background: red;
		float: right;
		margin-right: -200px;
	}
	* html p{ margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
	* html .left { width: auto;}
	*+ html p{ margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
</style>
</head>

<body>

 <div id="wrap">
	<span class="img"></span>
	<div class="left">
		<p>Я текст, который<br />выравнивается по вертикали<br />и при этом ни разу не упав вниз :)</p>
	</div>
</div>

</body>
</html>

bookworm · February 13, 2011

Оно, конечно, работает. Но как быть в случае с тегами списка? Попробую проверить на них, спасибо.

psywalker · February 13, 2011

Оно, конечно, работает. Но как быть в случае с тегами списка? Попробую проверить на них, спасибо.

С чем? Какими тегами? Покажи мне скриншот того, что хочешь получить. И ссылку на то, что уже есть.

rbelko · October 11, 2011

Всё отлично, но создай новую тему.

Edited October 11, 2011 by psywalker
Создание темы в чужом посте

Sign In

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

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information