CSS, центральное меню

Question

У меня есть 3 divs внутри одного div. - Заголовок Я хочу центрировать меню, а остальные div должны быть расположены слева и справа.

Click here to see link.

Это построить так:

<header> 
<div id="header-left"></div><div id="menu"></div><div id="header-right"></div> 
</header> 

Просто не могу заставить его работать. Спасибо!

Answer 1

Я сделал пару изменений:

#menu { 
    /*margin-left: 80px; removed */ 
} 

#menu { 
    border-radius: 3px 3px 3px 3px; 
    /*float: left; removed */ 
    margin: 27px auto 0; /* changed */ 
    width: 33%; 
    z-index: 122; 
} 

Это должно помочь вам.

Answer 2

Поскольку вы хотите изменить размер элементов при сжимании окна, лучшим решением будет использование flexbox. Я связывание статьи для вас: here

Answer 3

Вы можете легко сделать это с созданием heading действовать как таблица:

<header> 
    <div>left</div> 
    <div>center</div> 
    <div>right</div> 
<header> 

header { 
    background: green; 
    display: table; 
    width: 100%; 
} 
header div { 
    display: table-cell; 
} 
header div:nth-child(1) { 
    background: yellow; 
    width: 100px; 
} 
header div:nth-child(2) { 
    background: lightblue; 
} 
header div:nth-child(3) { 
    background: blue; 
    width: 100px; 
} 

JSFiddle demo

Оба внешние divs имеют фиксированную ширину, а вторая - в остальной части пространство. Надеюсь, это вам поможет.

[EDIT] Для того, чтобы центрировать меню, добавьте text-align: center во второй div.