Html 居中父div与动态和设置宽度的子div

这在主父div中包含我的徽标和导航栏

徽标具有设置的宽度，导航栏具有动态宽度。导航栏始终位于徽标右侧100px

目前，它是完美的，除了它一直在屏幕的左侧。我希望它在各个方面都是相同的，只是它位于屏幕的中心

我查了一下，尝试了网上找到的不同方法，似乎都把我的布局搞砸了。有什么想法吗？提前谢谢

HTML

---

将未知宽度的Div居中

当div宽度可变时，下面的定心技术效果良好。它使用外部和内部包装

外包装div设置为文本对齐：居中

内部包装是内联块，并响应外部包装的文本align:center。它使用text align:left覆盖第一个包装中的文本中心

徽标和菜单是浮动的，因此它们将彼此相邻

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

在本例中，nav将在较小的屏幕尺寸上包裹在徽标下。这在较小的屏幕上可能是有益的

---

---

这里是一个布局，将保持标志和导航一起使用CSS表格显示。由于这是重要的主菜单，因此为css表和表行添加了div，以保证浏览器的稳定性

---

最后，这里有一个类似于原始示例的使用绝对定位的实验，使用填充控制中心。我不会发布代码，因为absolute center很接近，但很难实现，而且顶级示例更好。

这很有效。但是，在屏幕调整大小后，我希望它缩小，而不是将橙色条放在绿色框下。如果你能把你的解决方案和我的解决方案混合在一起，那就太完美了。试试上面新的JSFIDLE。它使用CSS表格显示将徽标和导航保持在一起，而不是浮动。还有一个例子是，使用原始固定定位的一些位，将填充到中心，但它不能很好地居中！这么好的解释。我被困在这上面太久了！使用类有什么特别的原因吗？如果您将#allHead重命名为“.center-outer”，您可以同时重用center-outer和center-inner，以将站点内具有可变宽度的其他对象居中。导航条表和导航条表行也是如此。您可以将它们重命名为.table style和.table row之类的通用名称，并添加一个.table单元格，以便在站点中将它们作为一个组重新使用。我只是把导航放在名字里，这样你就可以很容易地把它们变成id。是的，我花了一天多的时间试图在我的网站上解决一个类似的问题，所以我很高兴得到你的答案。

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

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

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

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