水平居中导航问题/徽标

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()事件并在此时执行上述代码来完成。