Html 如何在导航链接之间居中放置具有品牌形象的引导导航条？

所以我为一家虚构的公司设计了一个模拟的网站布局，这样我就可以在Twitter的Bootstrap3上测试我的技能，但是我在将我在photoshop上设计的东西转换成代码时遇到了问题

我正试图让整个导航栏的内容为中心，在品牌标识的两边都有链接。我已经在网上查过了，谷歌，stackoverflow等等，但是我似乎找不到任何接近我设计的东西！我很难理解这件事。它似乎应该是简单的，而我只是过度考虑了它的复杂性！链接需要位于图像的中心，但也需要位于导航栏本身的中心。布局如下：

[链接][链接][徽标][链接][链接]

以下是上述设计的图像：

---

您也可以尝试flexbox显示。为了实施它，您必须：

将

display:flex

属性添加到需要对齐的元素的父元素（在本例中：在导航栏中的

元素上，其中包含导航链接列表和品牌图像）

为需要对齐的元素设置

margin:auto

（在这种情况下：在

元素上）

可选：如果不希望元素显示在一行中（默认为bahavior），请调整

flex direction

属性的值。例如，如果要垂直列出元素，请添加

flex direction:column到
元素

这是一个示例代码，有两个不同的图像布局：在移动设备的列表之上，在小设备和上面的行的中间。
    HTML:
    ...
    <nav class="container">
        <div class="row visible-xs text-center">
            <div class="col-xs-12">
                <a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <ul class="text-center">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Our Food</a></li>
                    <li class="hidden-xs"><a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a></li>
                    <li><a href="#">Book a Table</a></li>
                    <li><a href="#">Promotions</a></li>
                </ul>
            </div>
        </div>
    </nav>
    ...

    CSS:
        body {background-color: #333333;}
        nav {background-color: #000000;}
        nav ul {
            display: flex; 
            list-style-type: none; 
            padding-left: 0;  //in order to eliminate Bootstrap's built-in 40px padding
        }
        nav ul > li {margin: auto;} //N.B. don't alter the margin property, if you want some further adjustments, use padding!
        nav ul > li > a:link, :visited, :hover, :active {
            color: #ffffff; 
            text-decoration:none;
        }
        @media all and (max-width:767px) {
            nav a > img {margin: 20px auto;}
            nav ul {flex-direction: column;} //only if you want to change the default direction
        }

HTML：
...







...
CSS:
正文{背景色：#333333；}
导航{背景色：#000000；}
导航ul{
显示器：flex；
列表样式类型：无；
左填充：0；//为了消除引导内置的40px填充
}
nav ul>li{margin:auto；}//N.B.不要更改margin属性，如果需要进一步调整，请使用padding！
导航ul>li>a:链接，：访问，：悬停，：活动{
颜色：#ffffff；
文字装饰：无；
}
@介质和全部（最大宽度：767px）{
导航a>img{边距：20px自动；}
nav ul{flex direction:column；}//仅当要更改默认方向时
}
要居中浮动的
导航栏导航
可以在
导航栏导航
本身和列表项或子元素上使用相对位置和负数
左
、
右
值

为确保徽标始终居中，您可以考虑不使用
导航对齐
，而是使用常规的
导航栏导航
，在锚定标签上的左右
填充
具有固定值，但在不同屏幕上具有单独的值

要使垂直对齐工作，只需将适当的
线高度
添加到锚定标记

我决定隐藏实际的
navbar品牌
，只在sx断点上显示它。
对于居中的徽标，则相反，因此我们在折叠的导航中没有徽标。看看这个例子，我相信你会明白的

这是一个例子


@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
navbar先生{
背景色：#231f20；
最小高度：自动；
位置：相对位置；
顶部：0px；
字体大小：13px；
宽度：自动；
边框底部：无；
边缘底部：0px；
填充：40px 0px；
}
.navbar品牌{
填充：0 15px；
高度：96px；
}
@介质（最小宽度：768px）{
.导航栏导航{
位置：相对位置；
右图：-50%；
}
.navbar nav>li{
位置：相对位置；
左-50%；
}
.导航栏导航>李a{
线高：126px；
垂直对齐：中间对齐；
填充：0 24px；
} 
}
@介质（最小宽度：992px）{
.导航栏导航>李a{
填充：0 48px；
} 
}
@介质（最小宽度：1200px）{
.导航栏导航>李a{
填充：0 68px；
} 
}

切换导航







看，这两个答案可以解决你的问题：，@Bastiaan谢谢！我已经看过了这两个链接，但是链接似乎设置在品牌的最左边和最右边，而不是以品牌标识为中心。可能是Hey@vanburenx的重复，谢谢链接！从这个问题中可以看出。到目前为止，我已经设法做到了这一点，但是li文本链接似乎没有垂直居中？有什么想法吗？谢谢谢谢你的回复！我无法使您的代码与我的代码一起工作，但是我确实做到了，但是现在链接没有与图像grr垂直对齐。谢谢你的帮助！是的，flex显示器非常敏感，它不喜欢与其他显示器混为一谈。：）嘿，Ross，我在这里创建了一个JSFIDLE:（），在这里您可以看到这段代码的效果。它响应迅速，因此您必须稍微拉伸结果窗口才能看到效果。这就是你想要达到的目标吗？答案非常准确，谢谢你，大卫！当然，没问题。快乐编码。