Проблемы с горизонтальной центрированной навигацией/логотипом

Question

Я пытаюсь разместить мой заголовок (логотип и навигация), чтобы логотип находился в центре страницы. Сейчас все работает нормально, если левая и правая навигация имеют одинаковую ширину. Но я бы хотел, чтобы логотип находился в центре страницы независимо от ширины элементов навигации. Сейчас меня не волнует вертикальное выравнивание, только горизонтальное.

• Логотип должен быть горизонтально по центру (относительно окна браузера)
• нужно иметь элементы навигации слева и справа от логотипа
• Количество элементов навигации и ширины каждого элемента может изменяться (левая и правая сторона, скорее всего, различаются по ширине)
• Я хочу, чтобы заголовок, чтобы быть шириной 100% (ширина окна браузера)
• HTML, и CSS может полностью изменить от того, что я перечислил
• Использовать JavaScript только для выбора селектора/свойства CSS (т. Дин Эдвардс IE7), поддержка HTML5 (т.е. прокладка/v) и т.д.

Пример кода

jsFiddle

Logo/Навигация Mock-Up (ничто не в масштабе)

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() в окне браузера и выполнения вышеуказанного кода в это время.