Bootstrap 3 Navbar菜单项对齐(Bootstrap 3 Navbar menu item alignment)

网站： 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> </div> </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文件目前很乱。

Site : http://www.Spotlightdd.co.uk

I have a navbar that has an increased size due to the logo in the middle. The logo has a -margin value to line it up with the bottom border (I know it's out by a few px). What i'm trying to do is move the text down without just increasing the size of the navbar, so it looks more centered in the navbar. Currently, i've tried using margin/padding.line-height, anything i can think of that would only move the text to no avail. If someone could try a hand at sorting it, that would be brilliant.

Thanks

(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> </div> </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; }

I tried to put in every bit of code relevant. Apologies because the css file is a mess at the moment.