Часто 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. vov @ 6 авг 2016 г. в 12:35
спасибо