HTML5 - 徽標不在導航欄上居中

-3

我是新來的stackoverflow，所以如果我沒有正確解釋某事，請和我一起裸照。HTML5 - 徽標不在導航欄上居中

我爲我工作的公司創建了一個HTML5網站，但我在導航欄中遇到了徽標問題。我遇到的問題是徽標不是以菜單鏈接爲中心的導航欄。

我有點意識到，導航欄中的一些單詞是不同的寬度，這是導致徽標漂移到左側。但是，必須有辦法阻止這種情況發生嗎？

Photo - Nav Bar with Logo

如果有人應該闡明如何解決這部分光將非常感激。我在網上搜索了很多論壇和主題，但找不到答案。

直播鏈接網站：http://www.ebigpicture.digital

來源

2016-11-21 Seb

你可以發佈樣本代碼嗎？ – 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。

來源

2016-11-21 13:38:03 TRDrake

圖例：D 這已解決了我的問題，但它在左側菜單上留下了空白。試圖找出如何解決它。任何建議要做到這一點？ – Seb

默認情況下，「Col」類具有邊距和填充，因此您應該將自定義類或樣式添加到使用cols的div。對於第一個左側菜單項，您可以添加禁用「col」左側邊距的樣式。然而，保證金不應該那麼大......也許還有另一個課程。 – TRDrake

哎呀，意外結束了上面的評論。您應該查看Chrome控制檯，該菜單的樣式並獲取該邊距來自哪裏。像這樣：http://imgur.com/dl0VrAq。在那裏你應該得到保證金的來源，並在另一個類中手動禁用邊距。 – TRDrake

-2

居中標誌使用下面的CSS

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

希望這會有所幫助。

來源

2016-11-21 13:29:01

嗨格雷厄姆，謝謝你這個但那不是我真正想要的。如果我使用上面的代碼，導航欄左側會有一個很大的空間。我正在考慮是否有一種方法可以精確地標記帶有徽標的菜單按鈕。 – Seb

HTML5 - 徽標不在導航欄上居中

回答

相關問題