中心父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

围绕未知的事业部的宽度

当格宽度是可变的，该中心技术如下效果很好。它使用外部和内部包装。

1. 外部包装的div设置为文本对齐：中心。

2. 内包装为内联块，并响应来自外包装的text-align：center。它使用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;  
} 

---

这里是一个布局，将使用CSS表显示保持标志和NAV在一起。由于这是您的重要主菜单，因此添加了用于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进行实验，使用类似于原来的例子绝对定位，与填充控制中心。我不会发布代码，因为绝对中心很接近但很难实现，最好的例子是更好的。