Bootstrap 3导航中的居中徽标答案

【问题标题】：Centering Logo in Bootstrap 3 NavigationBootstrap 3导航中的居中徽标
【发布时间】：2015-01-14 06:23:08
【问题描述】：

我有一个 CodePen，我正在使用 Bootstrap 开发赌场网站的模拟移动版本。可见性类正在发挥作用，使其仅在小屏幕或超小屏幕上出现。

导航栏中有一个徽标，我似乎无法“正确”居中。我需要徽标来考虑栏的全宽，而不仅仅是全宽减去切换区域。

这是我的完整页面CodePen

这里是casino website that is actually implementing what I speak of，我只是看不出他们是怎么做到的。我在这里发现了一个问题，似乎接近我想要的“Located Here”。它建议使用与此 CSS 对应的 DIV 包装代码（但它仍然不起作用）：

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

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

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案1】：

将width: 100vw 或width: 100% 添加到.navbar-header

【讨论】：

嘿坦博。谢谢你，因为我确实忘记了。
坦博。你的建议肯定有助于让它靠近中心。我更新了我的代码以反映我在本地所做的更改。它仍然不是 100% 居中，让我发疯。
@bmoneruxui 将text-align: center; 添加到navbar-header 和.navbar-brand img { width: 197px; margin: 0 auto; padding: 8px 0px; }

【解决方案2】：

好的，我想通了。花了一些时间，但我添加了这个......

.navbar-brand img {
  width: 197px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 0px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
}

这一切都解决了。我也申请了我的 CodePen。

【讨论】：