Центральный родительский div с динамическими и установленными ширинами дочерних divs

Question

В нем содержится как мой логотип, так и панель навигации внутри основного родительского div.

Логотип имеет ширину набора, а панель навигации имеет динамическую ширину. Панель навигации всегда находится на расстоянии 100 пикселей справа от логотипа.

В настоящий момент это прекрасно, за исключением того, что он постоянно находится слева от экрана. Я хотел бы, чтобы он был идентичным во всех аспектах, за исключением того, что он находится в центре экрана.

Я искал это и пробовал разные методы, которые я нашел в режиме онлайн, все, кажется, испортили мой макет. Есть идеи? Заранее спасибо.

HTML

<div id="allHead"> 
    <div id="logo"></div> 
    <div id="navigation"></div> 
</div> 

CSS

#allHead { 

    position: relative; 
} 


#logo { 

    width : 100px; 
    height : 80px; 
    background-color: green; 
} 


#navigation { 

    position: absolute; 
    max-width: 600px; 
    left: 100px; 
    top: 10px; 
    right: 0px; 
    height : 60px; 
    background-color: orange; 
} 

Answer 1

Центрирование Div Неизвестного Ширина

Когда DIV ширина переменная, метод центрирования ниже работает хорошо. Он использует внешнюю и внутреннюю обертку.

1. Наружная обертка DIV установлен в выравнивания текста: центр.

2. Внутренняя обертка встроенный блок и отвечает на выравнивание текста: центр от внешней обертки. Он использует text-align: left для перезаписи текстового центра из первой обертки.

3. Логотип и меню плавают так, чтобы они были рядом друг с другом.

Это хорошая техника для центрирования, когда ширина может быть переменной.

В этом примере навигатор будет обернут под логотипом меньшие размеры экрана. Это может быть полезно на небольших экранах.

---

JSFiddle Example

#allHead { 
    text-align:center; 
} 

.center-inner { 
    text-align:left; 
    display:inline-block; 
} 

#logo { 
    width : 100px; 
    height : 80px; 
    background-color: green; 
    float:left; 
} 

#navigation { 
    max-width: 600px; 
    background-color: orange; 
    float:left;  
} 

---

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

JSFiddle

#allHead { 
    text-align:center; 
} 

.center-inner { 
    text-align:left; 
    display:inline-block; 
} 

.nav-bar-table { 
    display:table; 
} 

.nav-bar-table-row { 
    display:table-row; 
} 

#logo { 
    width : 100px; 
    height : 80px; 
    background-color: green; 
    display:table-cell; 
} 

#navigation { 
    max-width: 600px; 
    background-color: orange; 
    display:table-cell; 
    padding:.5em;  
} 

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