Выравниваем по центру списки из блочных элементов floated

Простое решение задачи по центрированию маркированных списков

Выравнивание floated элементов

Часто 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%; }

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

1 комментарий к посту «Выравниваем по центру списки из блочных элементов floated»
  • Аватар

    1. vov @ 6 авг 2016 г. в 12:35

    спасибо

Новый комментарий

Для редактирования комментария осталось 10 минут