以圖像爲中心的導航菜單

Question

我的導航菜單居中有問題。我希望我的標誌完全集中在網站上，並鏈接到它的內聯。當我將整個菜單居中時，確實以中心爲中心，但我的圖像不在網站的中心。

有沒有一種解決方案，以標識爲中心導航菜單？

<header> 
<div class="nav-desktop"> 
     <nav> 
      <ul> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li> 
       <li><a href="#">Awards</a></li> 
       <li><a href="#">Team</a></li>    
      </ul>   
     </nav> 
    </div> 
    </header> 



    header 
{ 
    background: #3f3f3f; 
} 
.nav-desktop 
{ 
    width: 100%; 
    position: relative; 
    padding-top: 30px; 
} 

.nav-desktop ul 
{ 
    list-style-type: none; 
    display: inline-block; 
} 

.nav-desktop ul li 
{ 
    display: inline-block; 
} 

.nav-desktop ul li img 
{ 
    vertical-align: middle; 
} 

而且這裏是我的jsfiddle https://jsfiddle.net/brq8f7nz/1/

感謝您的幫助！

Answer 1

我知道實現這一目標的最好辦法是設置相同width屬性到所有<li>元素，除了一個保持圖像：

<li class="menuli"><a href="#">Services</a></li> 
    <li class="menuli"><a href="#">Portfolio</a></li> 
    <li><img src="....."></li> 
    <li class="menuli"><a href="#">Awards</a></li> 
    <li class="menuli"><a href="#">Team</a></li> 

在CSS：

.menuli 
{ 
    width:300px; 
    text-align:center; 
} 

Answer 2

只添加nav風格並刪除padding-top: 30px;在.nav-桌面類

nav{ 
    text-align:center; 
} 

Revise Fiddle

header { 
 
    background: #3f3f3f; 
 
} 
 

 
nav { 
 
    text-align: center; 
 
} 
 

 
.nav-desktop { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.nav-desktop ul { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
} 
 

 
.nav-desktop ul li { 
 
    display: inline-block; 
 
} 
 

 
.nav-desktop ul li img { 
 
    vertical-align: middle; 
 
}

<header> 
 
    <div class="nav-desktop"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">Portfolio</a></li> 
 
     <li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li> 
 
     <li><a href="#">Awards</a></li> 
 
     <li><a href="#">Team</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

Answer 3

我知道了......我UL剛離開填充，這是一個原因，我的標誌是不是在市中心，但更在右邊。

謝謝你們！