Question

我正在尝试使用bootstrap 3.0将我的网站品牌集中在导航栏中，但这样做并不成功。我尝试了这两种解决方案： twitter bootstrap -- center brand in nav bar Bootstrap: center some navbar items 这对我都没有用。这是我目前的代码：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.php">My Website's Brand</a>
    </div>
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

我尝试过text-align：center和auto margin，但没有任何效果。有任何想法吗？编辑：JSFiddle：http://jsfiddle.net/3Kqn8/

Answer 1

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

演示http://jsfiddle.net/ujgdL/

编辑：Bootstrap更新。

.navbar-header { text-align: center;  }
.navbar-brand { display: inline-block; float: none; }

工作示例http://jsfiddle.net/3Kqn8/1/

Answer 2

你必须为引导类做几次覆盖，即：

.navbar-header {
    padding-top:15px;
    text-align:center;
    float:none;
}
.navbar-brand {
    float:none;
}

最重要的是，

.navbar-brand向左浮动。所以你需要将float设置为none。 navbar-header需要text-align:center居中，padding-top:15px需要调整移除浮动时删除的填充样式。可能是一些更好的方法，但这是最基本的解决方案。

请参阅演示：http://jsfiddle.net/bozdoz/KDsJ8/

更新

您还需要将.navbar-header设置为float:none，因为在不同的屏幕尺寸上它会向左浮动。：P

小提琴更新。

Answer 3

我还有另一个解决方案：

.navbar-header {
    text-align:center; // Align center will work after we clear the "Float" in ".navbar-brand"
    line-height: 50px; // To make our text to vertical align to middle;
}
.navbar-brand {
    float: none; // Clear the float for align the text
    display: block; // To Make it click on the hold box
}

无法将网站品牌置于导航栏中心？

3 个答案:

更新