Выравнивание блоков div по центру

05.05.2012

Самый популярный пример выравнивания блока div по центру заключается в применении простого css кода "margin: 0 auto;". Но, что если выравнивать нужно много блочных элементов разной длинны?

Пример (потянуть окно браузера):

ссылка в меню
длинная ссылка в меню
очень длинная ссылка в меню
длинная ссылка в меню
очень длинная ссылка в меню
ссылка в меню
длинная ссылка в меню
очень длинная ссылка в меню
ссылка в меню

За образец можно взять тег li, который, как правило, используется в меню сайта. То же самое можно применить и к тегу div.

HTML код:

<ul>
<li>ссылка в меню</li>
<li>длинная ссылка в меню</li>
<li>очень длинная ссылка в меню</li>
<li>ссылка в меню</li>
<li>длинная ссылка в меню</li>
<li>очень длинная ссылка в меню</li>
</ul>

CSS код:

ul { text-align: center; }
ul li { display: inline-block; }