中心父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進行實驗，使用類似於原來的例子絕對定位，與填充控制中心。我不會發布代碼，因爲絕對中心很接近但很難實現，最好的例子是更好的。