탐색 바는

Question

HTML을 중심으로하지 :

<nav> 
    <ul> 
    <li><a href="Index">Home</a></li> 
    <li><a href="History">History</a></li> 
    <li><a href="Appointments">Appointments</a></li> 
    <li><a href="Contactus">Contact us</a></li> 

    </ul> 
</nav> 

CSS :

nav { 
position: relative; 
margin: auto; 
padding: 0; 
list-style: none; 
width: 100%; 
display: center;} 


nav ul li { 
    display: inline; 
} 

nav ul li a { 
    display: inline-block; 
    text-decoration: none; 
    padding: 5px 0; 
    width: 100px; 
    background: #Cc3399; 
    color: #eee; 
    float: left; 
    text-align: center; 
    border-left: 1px solid #fff; 

} 

nav ul li a:hover { 
    background: #a2b3a1; 
    color: #000 
} 

기본적으로, 나는 내 사양에 맞는이 탐색 모음을 만들기 위해 관리했습니다. 그러나, 그것은 중앙에 있지 않습니다, 그것은 수직으로 위치합니다, 그러나 수평으로 그것은 왼쪽으로 가고 페이지의 중앙 근처에 없습니다.

Answer 1

하나의 솔루션이 inline-block에 inline를 교체하고 부모 text-align: center를 사용하는 것입니다 (또한 display: center 유효 CSS를하지 않습니다) : 당신이 그것을 위해 100 %로 여유를 준 이후

nav { 
 
    position: relative; 
 
    margin: auto; 
 
    padding: 0; 
 
    list-style: none; 
 
    width: 100%; 
 
    text-align: center;/*add text align-center*/ 
 
} 
 
nav ul li { 
 
    display: inline-block;/*replace inline to inline-block*/ 
 
} 
 
nav ul li a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 5px 0; 
 
    width: 100px; 
 
    background: #Cc3399; 
 
    color: #eee; 
 
    float: left; 
 
    text-align: center; 
 
    border-left: 1px solid #fff; 
 
} 
 
nav ul li a:hover { 
 
    background: #a2b3a1; 
 
    color: #000 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="Index">Home</a> 
 
     </li> 
 
     <li><a href="History">History</a> 
 
     </li> 
 
     <li><a href="Appointments">Appointments</a> 
 
     </li> 
 
     <li><a href="Contactus">Contact us</a> 
 
     </li> 
 
    </ul> 
 
</nav>

Answer 2

것 여백에 영향을 미치지 않습니다 .. 그래서 50 % 너비를주고 그것을 작동해야합니다. 수평으로 중심 ... 이런 요소

nav 
{ 
position: relative; 
margin: auto; 
padding: 0; 
list-style: none; 
width: 50%; 
display: center; 
} 

Answer 3

을 변경할 수 있고,이 요소는 디스플레이 될 필요 : 블록; 그것을 당신이

nav { 
    position: relative; 

    /*** centers the nav block ****/ 
    margin-left: auto; 
    margin-right: auto; 
    width: 80%; 
} 

nav ul{ 
    padding: 0; 
    list-style: none; 
} 

nav ul li { 
    display: inline; 
} 

nav ul li a { 
    display: inline-block; 
    text-decoration: none; 
    padding: 5px 0; 
    width: 20%; /*** make the centering look more vivid ****/ 
    background: #Cc3399; 
    color: #eee; 
    float: left; 
    text-align: center; 
    border-left: 1px solid #fff; 

} 

nav ul li a:hover { 
    background: #a2b3a1; 
    color: #000 
} 

을 가지고있는 당신은 jsfiddle