Question

网站：http://www.Spotlightdd.co.uk

由于中间有徽标，我的导航栏尺寸有所增加。徽标有一个-margin值，可以将它与底部边框对齐（我知道它只有几个px）。我想要做的是将文本向下移动而不仅仅增加导航栏的大小，因此它看起来更加集中在导航栏中。目前，我已经尝试过使用margin / padding.line-height，我能想到的任何东西只会让文本无效。如果有人可以尝试对它进行分类，那就太棒了。

由于

（Navbar html）

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="CompanyLogo" src="img/spotlightLogo.png" style = "height: 80px" >
                </a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav nav-center">
                    <li><a href="index.html"> HOME </a></li>
                    <li><a href="web-design.html"> WEB DESIGN</a></li>
                    <li><a href="graphic-design.html"> GRAPHIC DESIGN </a></li>
                    <li><a href="social-media.html"> SOCIAL MEDIA </a></li>        
                    <li class = "logo"><a href = "index.html"> <img src = "img/spotlightLogo.png" class = "headerLogo img-responsive"  alt = "spotlight" style = "height: 150px;"></a></li>
                    <li><a href="printing.html"> PRINTING </a></li>
                    <li class="active"><a href="#"> BRANDING </a></li>
                    <li><a href="video-production.html"> VIDEO PRODUCTION </a></li>  
                    <li><a href="contact.html"> CONTACT </a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

（Navbar CSS）

.navbar-default {
    border-bottom: 3px solid #CE1344;
    background-image: none;
    background-color: white;
}
.navbar .navbar-nav {
  text-align: center;
  display: inline-block;
  float: none;
  vertical-align: top;
}
li > a {
    margin-top: 0px;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}
.headerLogo {
    margin-bottom: -50px;
}

我试图把相关的每一段代码都放进去。抱歉，因为目前css文件很乱。

Answer 1

尝试将此添加到您的css：

.navbar-nav>li{
 padding: 20px 0;
} 
.navbar-nav>li.logo{
 padding: 0
};

这应该可以解决问题。

Answer 2

试试这个：

.nav-center{
  position: relative;
  top: 20px;
}
li.logo {
  position: relative;
  bottom: 22px;
}

Bootstrap 3 Navbar菜单项对齐

2 个答案: