Seditio.by

Часто html верстка сайта требует выравнивания нескольких элементов по центру. Первым вариантом является, конечно:

<p style="text-align:center;">Lorem Ipsum</p>

А что делать если семантика требует использования маркированного списка (unordered list)? Разметка в таком случае будет выглядеть так:

<ul id="someNav">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Естественно, на ум приходит использование

ul#someNav   { text-align:center; }

Однако верстать инлайновые элементы, которыми li являются по умолчанию, кроссбраузерно и в стиле Pixel Perfect очень сложно. Зачастую затраченные усилия совершенно не окупают результат, тогда как простое решение существует. Цена ему -- "лишняя" обертка-див, однако результат обеспечивает и простоту и кроссбраузерность и идеальное соответствие PSD-макету:

<div id="someNav">
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

Весь трюк, естественно, в стилях:

div#someNav        { width:100%; float:left; overflow:hidden; position:relative; }
	div#someNav ul { text-align:center; clear:left; float:left; position:relative; left:50%; }
	div#someNav li { display:block; float:left; position:relative; right:50%; }