如何在导航链接之间将带有品牌形象的 Bootstrap 导航栏居中？ [关闭]

Question

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

我正在尝试使整个导航栏内容居中，并在品牌徽标的两侧添加链接。我已经在网上、谷歌、stackoverflow 等进行了检查，但是我似乎无法在任何接近我设计的地方得到它！我很难理解它。看起来它应该很简单，而我只是忘记了它的复杂性！链接需要位于图像的中心，但也要位于导航栏本身的中心。布局如下：

[链接] [链接] [LOGO] [链接] [链接]

这是上述设计的图片：

Answer 1

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

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

要使垂直对齐正常工作，只需将适当的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>

Answer 2

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

1. 将display: flex属性添加到需要对齐的元素的父元素中（在本例中：在导航栏中的<ul>元素上，其中包含导航链接列表和品牌形象）李>
2. 为需要对齐的元素设置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
        }