Центрирование Горизонтальные divs внутри внешнего Div?

Question

Я создаю горизонтальную панель меню.

Существует внешний div, содержащий внутренние divs (каждый из этих divs является отдельным пунктом меню).

Я использую float: left для стилизации на этих внутренних div, чтобы отображать их горизонтально, а не вертикально.

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

Я хочу, чтобы равный запас/отступ слева и справа отображался в центре меню.

Я попытался установить margin-left: auto; margin-right: auto на внешний div, а затем на внутренний div. Оба, похоже, не помогают.

Уже было посмотреть здесь: How to horizontally center a <div> in another <div>?

Однако этот конкретный ответ центрировать только один DIV, что у меня есть коллекция горизонтальных дивы (пункты меню), которые должны быть централизованы.

Любая помощь приветствуется.

Answer 1

Если пункты меню не являются сложными (например, без каких-либо фиксированных размеров или суб-элементов), попробуйте добавить следующие стили:

#outer { 
    text-align: center; 
} 
.menu-item { 
    display: inline; /* replace 'float:left' with this */ 
} 

• DEMO

В противном случае вам нужно обертка для внутренних элементов, которая имеет фиксированную ширину:

#wrapper { 
    margin: 0 auto; /* center in outer DIV */ 
    width: /* sum of widths of inner elements */; 
} 

• DEMO

ПРИМЕЧАНИЕ: семантический лучше, чтобы пункты меню в стиле, используя список, как и в демосе.

Answer 2

Прежде всего, если все ваши пункты меню имеют ширину и display:inline, что по умолчанию, вам не понадобится поплавок, чтобы выровнять их.

Но предположим, что, когда вы устанавливаете поплавок, ваши элементы удаляются из естественного потока документа, и, следовательно, margin:auto не будет работать, чтобы центрировать его. В этом случае вы можете создать другой контейнер div указанной ширины для пунктов меню, в котором вы можете использовать float, чтобы выровнять их. Теперь, что осталось, это центрировать этот один контейнер div в вашем внешнем div, который вы уже видели, как решить. Например, вы можете использовать технику margin:auto на контейнере div для его центра. Убедитесь, что у вас есть text-align:center для внешнего div.

Answer 3

Попробуйте это, более гибкое решение. Хотя вы действительно должны использовать элементы списка для навигационных элементов.

http://jsfiddle.net/qprdK/4/