Продолжение темы поднятой в Вертикальное/горизонтальное центрирование элементов в блоке

Все предложенное там носило весьма специфичный характер. На то были свои причины. В этот раз задача чуть проще - нет необходимости центрировать по вертикали.

Определим условия нашей задачи.

1. Центрируемый блок с неизвестной шириной (явного указания width нет)
2. Он же обычный блок, но может иметь стилевое правило float (к примеру, горизонтальное меню)

Собственно говоря, в меню все и дело. Занимаясь проблемой интеграции горизонтального меню с вложениями в скрипты Мастера Lasto, по вполне понятным причинам захотелось сделать меню с неизвестной заранее шириной, строго по центру. При добавлении новых ссылок меню просто раздвигается, визуально оставаясь отцентрированным.

Решений данной задачи хоть пруд пруди, но всегда, что-то не устраивает, оно и понятно. Не изобретая велосипед, замечу иногда мне легче самому, что-либо сделать с нуля, чем разбираться в чужом, может быть вполне достойном для подражания примере.

Тем более, что подобный прием использовался мной по приведенному выше линку.

Итак.

Скриншот. Не нужные подробности типа боковых колонок отпускаем.

Блок, в котором находится меню (контейнер), по ширине ограничен только самой страницей.

Переходим к оформлению.

css

  .menucenter {
    background:#e6eaff;
    border:#0dd 1px solid;
    margin:10px;
    height:30px;
  }
  .centermenu {float:left;position:relative;left:50%;}
  .cenmenu {position:relative;left:-50%;}
  *html .cenmenu {float:left;}

html

  <div class="menucenter">
   <div class="centermenu">
    <div class="cenmenu">

     Меню (контейнер) с float 

    </div>
   </div>
  </div>

Как видим, ничего сложного.

Теперь нюансы.

Если у центрируемого блока (меню) имеется стилевое правило float, применяем без затей - один в один.

Если оно не используется, то из таблицы стилей удаляется строка *html .cenmenu {float:left;}

Замаскировав background-color: меню (контейнера) под фон, на котором меню (контейнер) располагается, в стилях убиваем .menucenter и соответственно в html-коде удаляем ставший не нужным контейнер c классом "menucenter".

Итого – две-три строчки стилевых правил, да пара-тройка дополнительных блоков решает поставленную задачу. Жаль, но на сегодняшний день другие средства для подобных целей отсутствуют.