html - 无法在导航栏中将网站品牌居中？

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 margins，但没有任何效果。有任何想法吗？编辑:JSFiddle:http://jsfiddle.net/3Kqn8/

Answer 1

您必须对 Bootstrap 类进行一些覆盖，即:

.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 需要调整填充样式，当你删除 float 。可能有一些更好的方法来做到这一点，但这是最基本的解决方案。

查看演示:http://jsfiddle.net/bozdoz/KDsJ8/

更新

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

fiddle 已更新。