Центр родительского div с динамическими и заданными по ширине дочерними div ами

Question

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

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

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

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

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 являются переменными, метод центрирования ниже работает хорошо. Он использует внешнюю и внутреннюю обертку.

1. Внешняя оболочка div установлена ​​в text-align: center.

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

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

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

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

---

Пример JSFiddle

#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;    
}

---

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

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, чтобы поэкспериментировать с использованием абсолютного позиционирования, подобного вашему первоначальному примеру, с отступом, управляющим центрированием. Я не буду публиковать код, потому что абсолютный центр близок, но его трудно достичь, а лучшие примеры лучше.