탐색 메뉴 중앙 정렬

Question

블로거 탐색 모음을 중심으로 문제가 발생했습니다. 나는 정상적으로하는 것이 아주 쉬운 것처럼 보이지만, 이번에는 번거롭지 않다.

웹 사이트를 살펴 보자 나는 텍스트 정렬 시도했습니다 Center Navigation

, 여백 : 0 자동; Nothings는 작동하는 것처럼 보인다!

누군가가 나를 도울 수 있다면 그것은 좋은 것, 환호

현재 코드 :

.nav{ 
position: relative; 
margin: auto; 
list-style-type: none; 
text-transform: uppercase; 
text-align: center; 
border-top: 1px solid #aaaaaa; 
list-style:none; 
text-align:center; 

} 

li { 
    display:inline-block; 
} 


<ul class="nav"> 
<li><a href="http://www.hannahallinson.com/">Home</a></li> 
<li><a href="http://www.hannahallinson.com/p/about.html">About</a></li> 
<li><a href="http://www.hannahallinson.com/p/contact.html">Contact</a></li> 
<li><a href="http://www.instagram.com/hannahallinson">Instagram</a></li> 
<li><a href="http://www.twitter.com/hannahallinson">Twitter</a></li> 
</ul> 

Answer 1

제거 float: left;

.tabs .widget li, .tabs .widget li하려면이 시도 :

.tabs .widget li, .tabs .widget li { 
margin: 0; 
padding: 0; 
float: left; 
} 

Answer 2

모두 text-align:center 및 margin:0 auto 논리적에만 요소를 중앙에 배치하는 경우에 사용할 수 있습니다 기본값이 아닌 폭 그 이유는 그 값이 auto이고, 이는 block 요소의 경우 100 %입니다. 부모 전체를 채우는 요소는 중앙에 배치 할 수 없습니다.

ul.nav에 고정 폭을 지정하면 가운데 맞춤이 적용됩니다.

text-align:center을 사용하려면 ul도 제한해야합니다 (예 : display:inline-block). See this sample.

Answer 3

텍스트 정렬을 추가합니다 : 대신

.tabs .widget li, .tabs .widget li { 
margin: 0; 
padding: 0; 
} 

센터; 부모 div에