导航栏中心的 Twitter Bootstrap 3.0 徽标

Question

我想在导航栏中将我的徽标居中，我可以使用还是应该在导航栏中使用网格布局，或者我应该做其他事情：

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="navbar-header">
                            <!-- I want this at the center of navbar -->
            <a class="navbar-brand" href="#"><img src="logo.png"/></a>
        </div>
</div>

Answer 1

bwillis 显示的方法效果很好，但我不得不为导航栏折叠添加一些边距。 然后对我来说是：

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

.navbar-collapse {
        margin-top: 50px;
}

我还需要我的 navbar-nav 居中，然后我添加：

.navbar-nav {
    width: 100%;
    text-align: center;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}

Answer 2

不幸的是，接受的答案是 Bootstrap 2 使用 html。不过，我想出了几种使用 Bootstrap 3 的方法。最简单的方法可能是使用 css translate。

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

现场演示： http://codepen.io/candid/pen/dGPZvR

此方法还允许我们为徽标使用背景图像，并允许我们在不显示在显示中的情况下包含文本。

HTML：

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text</a>

CSS：

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

现场演示：http://codepen.io/candid/pen/NxWoJL

如果出于某种原因您只想在移动显示上执行此操作，只需将 .navbar-brand 包装在媒体查询中...

/* CENTER ON MOBILE ONLY */
@media (max-width: 768px) {
.navbar-brand {
        transform: translateX(-50%);
        left: 50%;
        position: absolute;
    }
}

Answer 3

这已经被问过几次了，比如here。

我已经设置了一个类似于您提供的 HTML 的 jsfiddle，使用您的 Gravatar，因为您的徽标不可用：http://jsfiddle.net/q68VS/

重要的 CSS：

.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}