목록 항목 가운데 맞추기

Question

프로젝트의 경우 왼쪽에는 메뉴 버튼이 있고 오른쪽에는 '맨 뒤로 가기'버튼이있는 (모바일) 탐색 막대가 있습니다. 내비게이션 막대 가운데에 로고가 표시되도록하고 싶습니다. 현재 정렬되지 않은 목록으로 작업하고 있습니다.

html로는 기본적으로 다음과 같습니다

<div class="navbar"> 
    <ul> 
      <li class="navmenu"><i class="icon-menu"></i></li> 
      <li class="mobilelogo"><a href="#top"><img class="moblogopic" src="media/navbarlogo.png" alt="logo"/></a></li> 
      <li class="up-icon" title="Back to top"><a href="#top"><i class="icon-up"></i></a></li> 
    </ul> 
</div> 

CSS의는 다음과 같습니다

.navbar{ 
width:100%; 
height: 45px; 
} 
.navbar ul{ 
padding: 0 10px; 
} 
.navmenu{ 
display:inline; 
float: left; 
} 
.mobilelogo{ 
display:inline; 
float:left; 
margin: 0 auto; 
} 
.up-icon{ 
display: inline; 
float:right; 
} 

여백 : 0 자동; 작동하지 않는 것 같습니다. margin-left : 50 %와 같은 것을 사용할 수 없습니다. 사이트가 응답 성이 있어야하고 크기를 변경하면 문제가 해결되기 때문입니다. 네비게이션 바는 현재 다음과 같습니다

Answer 1

당신은 다음 폭을 설정해야합니다 .. :

.navbar{ 
width:100%; 
height: 45px; 
} 
.navbar ul{ 
padding: 0 10px; 
} 
.navmenu{ 
display:inline; 
float: left; 
width:20%; 
} 
.mobilelogo{ 
display:inline; 
float:left; 
margin: 0 auto; 
width:60%; 
text-align:center; 
} 
.up-icon{ 
display: inline; 
float:right; 
width:20%; 
}