Question

我想让徽标在导航栏上方显示更大且居中。任何帮助将不胜感激。

<body class="home">
    <!-- wrapper -->
    <div id="wrapper" class="win-min-height">
        <header id="block01g" class="header block background01" zp-module="Header">
            <div class="container header_block">
                <a class="navbar-brand" href="#">
                    <img class="blacklogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
                    <img class="whitelogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
                </a>
            </div>
        </header>
    </div>
</body>

Answer 1

position:absolute;使用navbar-brand。将此添加到您的CSS：

.header_block{
  position:relative;
  padding:0;
  padding-top:45px;
}
.navbar-brand{
  position:absolute;
  top:0;
  left:50%;
  height:70px;
  transform:translate(-50%,0);
}
.navbar-brand img{
  height:100%;
  margin:0 auto;
  display:block;
  margin-bottom:100px;
}

这里是fiddle。你已经在身体的顶部设置了一些衬垫。你可以删除。这将使您的徽标与顶部对齐。

Answer 2

请替换此css

#block01g .navbar-brand {
  display: block;
  float: inherit;
  margin: 0 auto;
  padding-bottom: 0;
  padding-right: 0;
  text-align: center;
  width: auto;//you add width for logo
}

Answer 3

试试这个我简单地集中了你的标志，这就是你需要的吗？

.navbar-brand {
  display: block;
  float: none;
  font-size: 18px;
  height: auto;
  margin: 0 auto;
}

http://jsfiddle.net/ou51rksb/12/

Bootstrap：大型居中徽标导航栏

3 个答案: