Question

我尝试布置标题（徽标和导航），以便徽标位于页面的中心。现在，如果左右导航的宽度相同，一切正常。但我喜欢徽标位于页面的中心，无论导航元素的宽度如何。我现在并不担心垂直对齐，只是横向对齐。

徽标必须水平居中（相对于浏览器窗口）
需要在徽标的左侧和右侧有导航元素
导航元素的数量和每个元素的宽度可能会有所不同（左侧和右侧的宽度很可能不同）
我希望标题宽度为100％（浏览器窗口的宽度）
HTML和CSS可以完全改变我列出的内容
仅使用JavaScript进行CSS选择器/属性后备（即Dean Edwards IE7），HTML5支持（即shim / v）等。

示例代码

徽标/导航模拟（无需扩展） Logo / Navigation 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()事件并在那时执行上述代码来完成。

水平居中导航/徽标的问题

3 个答案: