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

Razor · October 21, 2009

Дано некое абстрактное

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

ul li {
	width: 100px;
	height: 50px;
	float: left;
}

Если в списке всего 2 элемента (<li>) то как можно выровнять их по-центру? Учитывая что ul на 100% ведь от окна растянуто по-умолчанию. Конечно можно задать ширину для ul и margin: 0 auto; но меня интересует именно автоматический вариант - чтобы при изменении кол-ва пунктов не было нужны изменять ширину ul.

Спасибо

psywalker · October 21, 2009

Вот я думаю кстати, что никак, сам лично делаю в таких случаях так: в LI помещаю DIV, и их уже там выравниваю если надо, вот типа как тут например: http://psywalker.ru/Portfolio/Sandex/main-page.html Вот это меню так сделано:

<ul class="learn">
			<li>
				<div>
					<img alt="" src="img/block1_bg.png" ilo-full-src="http://psywalker.ru/Portfolio/Sandex/img/block1_bg.png"/>
					<h2>Management<br/> Consulting</h2>
					<a class="learn_more" href="#">Learn more</a>
				</div>
			</li>
			<li>
				<div>
					<img alt="" src="img/block2_bg.png" ilo-full-src="http://psywalker.ru/Portfolio/Sandex/img/block2_bg.png"/>
					<h2>Market<br/> Assesment</h2>
					<a class="learn_more" href="#">Learn more</a>
				</div>
			</li>
			<li>
				<div>
					<img alt="" src="img/block3_bg.png" ilo-full-src="http://psywalker.ru/Portfolio/Sandex/img/block3_bg.png"/>
					<h2>Regulatory<br/> Support</h2>
					<a class="learn_more" href="#">Learn more</a>
				</div>
			</li>
		</ul>

Надеюсь кстати, что кто нибудь и правда подскажет нам путь легче, чем этот, буду очень рад увидеть его :unsure:

Edited October 21, 2009 by psywalker

Razor · October 21, 2009

Ну с дивами вариант тоже ручками выравнивание получается, правильно понимаю?

psywalker · October 21, 2009

Ну с дивами вариант тоже ручками выравнивание получается, правильно понимаю?

В смысле?

Razor · October 21, 2009

Аа уже по коду разобрался)

Ну это подгон руками все= небольшой. вот еслиб было решение вроде

text-align:center;

и все блоки по-центру - это да) но думаю утопия... просто решил спросить удостовериться

psywalker · October 21, 2009

А вот это как тебе?

<!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;}
		ul { list-style: none; text-align: center;}
			ul li { display: inline-block; width: 200px; height: 300px; text-align: left; border: 1px solid #000;}
</style>
</head>

<body>
	<ul>
		<li>Пункт 1</li>
		<li>Пункт 2</li>
	</ul>
</body>
</html>

Чё то правда к ИЕ6-7 подобраться не могу, спать уже хочу, давай завтра вобщем добьём, может кто и поможет ещё :unsure:

Edited October 21, 2009 by psywalker

Razor · October 21, 2009

ммм! неплохо! Для ие тоже пока ниче не могу придмуать(

надо почитать побольше мне про display

psywalker · October 22, 2009

ммм! неплохо! Для ие тоже пока ниче не могу придмуать(
надо почитать побольше мне про display

Вот дружище держи, как обещал вчера. Только не пойму в чём прикол, в общем когда в отдельные комментарии для ИЕ пишу свойство display: inline;, то пример работает, а когда пишу в общих стилях например так: //display: inline; - то в ИЕ они проигрывают общим. хм..ну ладно, будем разбираться в общем, а пока вот тебе решение твоей задачи:

<!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;}
		ul { list-style: none; text-align: center; white-space: nowrap;}

			ul li { 
				display: inline-block;
				width: 200px;
				height: 300px;
				text-align: left;
				border: 1px solid #000;
				margin: 0 10px;
			}
				ul li a { display: block; color: red; padding: 4px 3px;}

</style>

<!--[if lte IE 7]>
<style type="text/css">
	ul li {
		display: inline;
	}
</style>
<![endif]-->
</head>

<body>
	<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
	</ul>
</body>
</html>

Edited November 6, 2009 by psywalker

Searcher · October 22, 2009

Такой вариант вроде кроссбраузерный:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">

ul#menu {
	text-align: center;
	white-space: nowrap;
}

ul#menu li {
	display: inline;
	white-space: nowrap;
}

ul#menu li a:hover {
	color:red;
}

</style>
</head>
<body>

	<ul id="menu">
		<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>

если элемент меню не должен быть блочным...

psywalker · October 22, 2009

Searcher

Да, но есть проблемы

1) Нельзя поставить высоту и рамки

2) Внутри нельзя размещать блочные элементы

Поэтому мой пример надёжнее в этом плане

Edited October 22, 2009 by psywalker

Razor · October 22, 2009

Да, мне лучше вариант с полями )

psywalker, Searcher спасибо большое!!!)

Я так вообще понял text-align влияет на все инлайн и инлайн-блок элементы...

А вообще в хтмл нельзя блочный в инлайн засовывать, но если вот стилями как в примере менять инлайн на блок - то это плохо не считается?

psywalker · October 22, 2009

Да, мне лучше вариант с полями )
psywalker, Searcher спасибо большое!!!)
Я так вообще понял text-align влияет на все инлайн и инлайн-блок элементы...
А вообще в хтмл нельзя блочный в инлайн засовывать, но если вот стилями как в примере менять инлайн на блок - то это плохо не считается?

Это считается правильным, ибо это уже CSS и там такое разрешено :angry: А в html ты ничего не нарушаешь, ты создаёшь обычный список ul, в него вставляешь как положено li и т. д.

Sign In

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

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information