如何将 Bootstrap 导航栏与导航链接之间的品牌形象居中？

Question

所以我为一家虚构的公司设计了一个模拟网站布局，这样我就可以在 Twitter 上测试我的技能 Bootstrap 3 但是我在将我在 Photoshop 上设计的内容传递给代码时遇到了问题。

我试图让整个导航栏内容居中，links 位于品牌徽标的两侧。我已经在线查看 google、Whosebug 等，但是我似乎无法在接近我设计的任何地方得到它！我很难理解它。看起来应该很简单，我只是想多了它的复杂性！ links 需要位于图像的中心，但也位于导航栏本身的中心。布局如下：

[link] [link] [徽标] [link] [link]

这是上述设计的图片：

Answer 1

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

将 display: flex 属性添加到您需要对齐的元素的父元素（在本例中：在导航栏中的 <ul> 元素上，其中包含列表导航链接和品牌形象）
为需要对齐的元素设置 margin: auto（在本例中：在 <li> 元素上）

可选：如果您不希望元素连续显示（默认行为），请调整 flex-direction 属性的值。例如。如果要垂直列出元素，请将 flex-direction: column; 添加到 <ul> 元素。

这是一个示例代码，有两种不同的图像位置：移动设备的列表顶部和小型及以上设备的行中间。

    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
        }

Answer 2

要使浮动 navbar-nav 居中，您可以在 navbar-nav 本身和列表项或子元素上使用相对位置和负 left、right 值。

为了确保徽标始终居中，您可以考虑不使用 nav-justified，而是使用锚点上的左右 padding 具有固定值的常规 navbar-nav标签，但具有针对不同屏幕的单独值。

要使垂直对齐正常工作，只需将适当的 line-height 添加到锚标记即可。

我决定隐藏实际的 navbar-brand 并且只在 sx 断点上显示它。对于居中的徽标，情况正好相反，因此我们在折叠的导航栏中没有徽标。看看这个例子，我相信你会明白的。

这是例子。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.navbar {
  background-color: #231f20;
  min-height: auto;
  position: relative;
  top: 0px;
  font-size: 13px;
  width: auto;
  border-bottom: none;
  margin-bottom: 0px;
  padding: 40px 0px;
}
.navbar-brand {
  padding: 0 15px;
  height: 96px;
}

@media (min-width: 768px) {
  .navbar-nav {
    position: relative;
    right: -50%;
  }
  .navbar-nav > li {
    position: relative;
    left: -50%;
  }
  .navbar-nav > li a {
    line-height: 126px;
    vertical-align: middle;
    padding: 0 24px;
  } 
}

@media (min-width: 992px) {
  .navbar-nav > li a {
    padding: 0 48px;
  } 
}

@media (min-width: 1200px) {
  .navbar-nav > li a {
    padding: 0 68px;
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Food</a></li>
                <li class="hidden-xs"><a href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a></li>
                <li><a href="#">Book a Table</a></li>
                <li><a href="#">Promotions</a></li>
            </ul>
        </div>
    </div>
</nav>

如何将 Bootstrap 导航栏与导航链接之间的品牌形象居中？

How do I center a Bootstrap nav bar with a brand image inbetween nav links?

html

css

twitter-bootstrap

twitter-bootstrap-3

nav