내 탐색 막대를 내 웹 사이트의 가운데에 배치하려면 어떻게합니까?

프로젝트 웹 사이트에 탐색 모음을 만들려고합니다. 나는 막대를 잘 얻는다. 그러나 나는 그것을 페이지의 중앙에 배치 할 수 없다. 나는 다양한 방법을 시도했다. 누군가 나를 도울 수 있습니까? 외부 스타일 시트를 사용하고 있습니다. 여기내 탐색 막대를 내 웹 사이트의 가운데에 배치하려면 어떻게합니까?

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="tylerschevy.css"> 
    </head> 
    <body> 
     <h1>Tyler Chevrolet</h1> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="showRoom.html">Show Room</a></li> 
      <li><a href="contactUs.html">Contact Us</a></li> 
      <li><a href="aboutUs.html">About Us</a></li> 
      <li><a href="http://www.chevrolet.com">Official Site</a></li> 
     </ul> 
    </body> 
</html>

내 스타일 시트입니다 :

h1 {text-align:center} 
ul{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 
li{ 
    display: inline-block; 
    float:left; 
} 
a:link,a:visited{ 
    display:block; 
    width:120px; 
    font-weight:bold; 
    color:black; 
    background-color:#FFFF33; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-transform:uppercase; 
} 
a:hover,a:active{ 
    background-color:#0033FF; 
    color:white; 
}

jsfiddle

출처

2014-05-15 user3642586

확인과 같은 하나의 래퍼 (그래서 당신은 몸을 만지지 않는)에 UL을 넣어하는 것이 좋습니다 이것 : http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu – TheBokiya

이 <ul>에 class="nav"을 추가 한 다음 스타일 시트에 새로운 클래스를 만들어 여기 내 메인 페이지에 대한 코드는 다음과 같습니다

.nav { 
display: table; margin: 0 auto; 
}

jsFiddle

출처

2014-05-15 21:13:12 dcclassics

센터 UL

body { 
    text-align:center; 
} 

ul { 
    margin:0 auto; 
    display: inline-block; 
}

나는이

<div class="wrapper"> 
    <ul>...</ul> 
</div>

CSS

.wrapper{ 
    text-align:center; 
} 

ul { 
    margin:0 auto; 
    display: inline-block; 
}

출처

2014-05-15 21:13:43 keypaul

내 탐색 막대를 내 웹 사이트의 가운데에 배치하려면 어떻게합니까?

답변

관련 문제