HTML5 - 徽标不在导航栏上居中

问题描述：

我是新来的stackoverflow，所以如果我没有正确解释某事，请和我一起裸照。HTML5 - 徽标不在导航栏上居中

我为我工作的公司创建了一个HTML5网站，但我在导航栏中遇到了徽标问题。我遇到的问题是徽标不是以菜单链接为中心的导航栏。

我有点意识到，导航栏中的一些单词是不同的宽度，这是导致徽标漂移到左侧。但是，必须有办法阻止这种情况发生吗？

Photo - Nav Bar with Logo

如果有人应该阐明如何解决这部分光将非常感激。我在网上搜索了很多论坛和主题，但找不到答案。

直播链接网站：http://www.ebigpicture.digital

你可以发布样本代码吗？ – picibucor

提供最小代码 – Aroniaina

我看不到问题。它以我为中心。 –

答

当您使用Bootstrap时，您是否考虑过将导航栏分为3列？左选项 - 徽标 - 正确的选项。

也许col 5 - > col 2 - > col 5会工作。

<div class="collapse navbar-collapse" id="main-menu"> 
 
<ul class="nav navbar-nav navbar-left"> 
 
<li><a href="#home">HOME</a></li> 
 
<li><a href="#about">SERVICES</a></li> 
 
<li><a href="#clients">CLIENTS</a></li> 
 
<li><a href="#services">THE PATH</a></li> 
 
</ul> 
 
<a class="site-logo" href="index.html"> 
 
<img class="logo-size" src="http://www.ebigpicture.digital/img/logo-blue.png" alt="logo"> 
 
</a> 
 
<ul class="nav navbar-nav navbar-right"> 
 
<li><a href="#story">CASE STUDIES</a></li> 
 
<li><a href="#facts">SOLUTION</a></li> 
 
<li><a href="#testimonial">TESTIMONIALS</a></li> 
 
<li><a href="#contact">CONTACT</a></li> 
 
</ul> 
 
</div>

会变成这样的：

<div class="collapse navbar-collapse" id="main-menu"> 
 
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
<li><a href="#home">HOME</a></li> 
 
<li><a href="#about">SERVICES</a></li> 
 
<li><a href="#clients">CLIENTS</a></li> 
 
<li><a href="#services">THE PATH</a></li> 
 
</ul> 
 
</div> 
 
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
 
    <a class="site-logo" href="index.html"> 
 
<img class="logo-size" src="http://www.ebigpicture.digital/img/logo-blue.png" alt="logo"> 
 
</a> 
 
</div> 
 
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> 
 
<ul class="nav navbar-nav navbar-right"> 
 
<li><a href="#story">CASE STUDIES</a></li> 
 
<li><a href="#facts">SOLUTION</a></li> 
 
<li><a href="#testimonial">TESTIMONIALS</a></li> 
 
<li><a href="#contact">CONTACT</a></li> 
 
</ul> 
 
</div> 
 
</div>

我知道你只是显示MD和LG尺寸全导航栏...所以你可以删除div中的xs xm cols。

图例：D 这已解决了我的问题，但它在左侧菜单上留下了空白。试图找出如何解决它。任何建议要做到这一点？ – Seb

默认情况下，“Col”类具有边距和填充，因此您应该将自定义类或样式添加到使用cols的div。对于第一个左侧菜单项，您可以添加禁用“col”左侧边距的样式。然而，保证金不应该那么大......也许还有另一个课程。 – TRDrake

哎呀，意外结束了上面的评论。您应该查看Chrome控制台，该菜单的样式并获取该边距来自哪里。像这样：http://imgur.com/dl0VrAq。在那里你应该得到保证金的来源，并在另一个类中手动禁用边距。 – TRDrake

答

居中标志使用下面的CSS

.site-logo{ position: absolute; left: 50%; margin-left: -40px; }

希望这会有所帮助。

嗨格雷厄姆，谢谢你这个但那不是我真正想要的。如果我使用上面的代码，导航栏左侧会有一个很大的空间。我正在考虑是否有一种方法可以精确地标记带有徽标的菜单按钮。 – Seb

HTML5 - 徽标不在导航栏上居中

相关推荐