html - Bootstrap 3 导航栏菜单项对齐

Question

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

我有一个导航栏，由于中间有 Logo ，它的尺寸有所增加。 Logo 有一个 -margin 值，使其与底部边框对齐(我知道它超出了几个像素)。我想要做的是将文本向下移动而不只是增加导航栏的大小，因此它看起来更集中在导航栏中。目前，我已经尝试使用 margin/padding.line-height，任何我能想到的只会移动文本无济于事。如果有人可以尝试对其进行排序，那就太棒了。

谢谢

(导航栏 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>

(导航栏 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
};

这应该可以解决问题。