1

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

<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>
4

3 回答 3

7

不幸的是，接受的答案是使用 html 作为Bootstrap 2。但是，我想出了几种使用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;
    }
}
于 2015-12-08T07:00:29.000 回答
3

这已经被问过几次了，就像这里一样。

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

重要的 CSS：

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

.navbar-inner{
    text-align:center;
}
于 2013-10-10T00:01:05.597 回答
-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;
}
于 2016-06-30T21:40:40.177 回答