CSS를 사용하는 센터

Question

메뉴가있어서 CSS를 사용하여 중심에 배치하고 싶습니다.

현재 코드 :

.menu { 
    margin:10px 0 10px 20px; 
    float:right; 
} 
.menu li { 
    padding:0 20px 0 20px; 
    border-left:1px solid #FFF; 
    border-right:1px solid #DDD; 
    float:left; 
} 
.menu li.first { 
    border-left:none; 
} 

내가/변경 사항 추가합니다/메뉴 표시 센터를 만들기 위해 제거하고 왼쪽/오른쪽하지? 감사! 이 작업을 수행하는 가장 쉬운 방법 중

Answer 1

하나는 auto에 왼쪽과 오른쪽 여백을 모두 설정하고 요소를 고정 폭을 제공하는 것입니다 :

.menu { 
    width: 500px; // or whatever 
    margin-left: auto; 
    margin-right: auto; 
} 

W3C의 recommends 당신은 당신의 .menu 요소를 원하는 경우 밀접 내용 주위에 맞게 수,이 같은 대신 절대 위치 및 50 %의 마진을 사용할 수 있습니다 :

.menu { 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
} 

이는 W3C 페이지에서 어떻게 작동하는지 당신은 볼 수 있습니다. 그러나 첫 번째 방법이 더 일반적입니다.