이미지 중심의 탐색 메뉴

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/

감사입니다! 는 CSS에서

<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> 

:

Answer 1

나는이 달성 알고있는 가장 좋은 방법은 이미지를 들고 사람을 제외하고, 모든 <li> 요소에 같은 width 속성을 설정하는 것입니다

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

Answer 2

에만nav 스타일을 추가하고 padding-top: 30px;을 .nav-desktop 클래스

에서 제거하십시오.

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 단지 패딩을 왼쪽 가지고 내 로고가 중앙하지만 더하지 왜 그것이 이유였다 오른쪽으로.

고마워요!