html - 将父 div 与动态和设置宽度子 div 居中

Question

这在主父 div 内包含我的 Logo 和导航栏。

Logo 具有固定宽度，导航栏具有动态宽度。导航栏始终位于 Logo 右侧 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 设置为 text-align:center。

2. 内部包装器是inline-block，并响应外部包装器的text-align:center。它使用 text-align:left 覆盖第一个包装器中的文本中心。

3. Logo 和菜单是 float 的，因此它们会彼此相邻。

当宽度可变时，这是一种很好的居中技术。

在此示例中，导航将在较小的屏幕尺寸上包裹在 Logo 下方。这对于较小的屏幕可能是有益的。

---

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

---

这是一个使用 CSS 表格显示将 Logo 和导航保持在一起的布局。由于这是重要的主菜单，因此为 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尝试使用与原始示例类似的绝对定位，并通过填充控制居中。我不会发布代码，因为绝对中心很接近但很难实现，并且顶部的示例更好。