水平居中導航問題/徽標

Question

我在嘗試佈置我的標題（徽標和導航），以便徽標位於頁面的中心。現在，如果左側和右側導航寬度相同，一切正常。但是我希望徽標位於頁面的中心位置，而不管導航元素的寬度。我現在不擔心垂直線，只是水平線。

• 標誌必須水平居中（相對於瀏覽器窗口）
• 需要有標誌的左和右導航元素
• 各元素的導航元素和寬度的數量可以變化（左側和右側將最有可能在寬度上不同）
• 我想報頭是100％的寬度（瀏覽器窗口的寬度）
• 的HTML和CSS完全可以從我列出
改變
• 僅將JavaScript用於CSS選擇器/屬性回退（即迪安愛德華茲IE7），HTML5支持（即墊片/ v）的等

示例代碼

jsFiddle

標誌/導航實體模型（沒有什麼是按比例）

HTML

<header> 
    <nav class="nav1"> 
     <ul> 
      <li><a href="http://example.com">Hello World</a></li> 
      <li><a href="http://example.com">Hello World</a></li> 
      <li><a href="http://example.com">Hello World</a></li> 
      <li><a href="">Hello</a></li> 
     </ul> 
    </nav> 
    <img src="http://markschamel.com/upload/blue.square.png" /> 
    <nav class="nav2"> 
     <ul> 
      <li><a href="">Hello World</a></li> 
      <li><a href="http://example.com">Hello</a></li> 
     </ul> 
    </nav> 
</header> 

CSS

header { 
    width: 100%; 
    text-align: center; 
} 
nav.nav1 { 
    text-align: right; 
    display: inline-block; 
} 
nav.nav2 { 
    text-align: left; 
    display: inline-block; 
} 
nav ul { 
    overflow: hidden; 
} 
nav.nav1 li { 
    float: left; 
} 
nav.nav2 li { 
    float: left; 
} 

Answer 1

我解決了我自己的問題。用最小寬度的百分比來估計UL的寬度是一件小事。還有一些其他小的更新。

演示：http://jsfiddle.net/S2ySk/3/

HTML

<header> 
    <nav class="nav1"> 
     <ul> 
      <li><a href="http://example.com">Hello World 1</a></li> 
      <li><a href="http://example.com">Hello World 2</a></li> 
      <li><a href="http://example.com">Hello World 3</a></li> 
      <li><a href="">Hello</a></li> 
     </ul> 
    </nav> 
    <img src="http://markschamel.com/upload/blue.square.png" /> 
    <nav class="nav2"> 
     <ul> 
      <li><a href="">Hello World</a></li> 
      <li><a href="http://example.com">Hello</a></li> 
     </ul> 
    </nav> 
</header> 

CSS

header { 
    width: 100%; 
    text-align: center; 
    background-color: #c87137; 
    white-space: nowrap; 
} 
nav { 
    min-width: 40%; 
    display: inline-block; 
} 
nav.nav1 { 
    text-align: right; 
} 
nav.nav2 { 
    text-align: left; 
} 
nav ul { 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    background-color: #ff0000; 
} 
nav li { 
    background-color: #008000; 
    white-space: nowrap; 
} 
nav.nav1 li { 
    float: right; 
} 
nav.nav2 li { 
    float: left; 
} 

Answer 2

你覺得這是什麼：http://jsfiddle.net/7rY6B/？

Answer 3

我無法弄清楚CSS的問題，但耶，使用JavaScript，你可以實現它。

$(function() { 
    headerWidth = $('header').width(); 
    imgWidth = $('img').width(); 
    padding = 25; // This is the approx. padding the header tag takes 
    half = Math.round((headerWidth - imgWidth - padding)/2); 
    $('.nav1,.nav2').css('width', half + 'px'); 
});​ 

演示：http://jsfiddle.net/S2ySk/2/

全屏：http://jsfiddle.net/S2ySk/2/embedded/result/

請注意，直到它不會工作，如果你調整瀏覽器，你必須調整之後再次刷新頁面。可以使用瀏覽器窗口的.resize()事件並在此時執行上述代碼來完成。