div에 가로로 가운데를 배치하는 적절한 방법은 무엇입니까?

저는 HTML/CSS에 비교적 익숙하기 때문에 다른 실수를 고쳐서 (아마) 만들었습니다. 내 HTML과 CSS는 다음과 같습니다. http://jsfiddle.net/luxurymode/PrjJ3/3/div에 가로로 가운데를 배치하는 적절한 방법은 무엇입니까?

내가 원하는 것은 "navbar"안에 UL을 수평 중심으로 배치하기 위해서입니다. 올바른 방법은 무엇입니까?

편집 : 실수로 잘못된 바이올린을 올렸습니다. 그것은

가

출처

2012-02-27 LuxuryMode

효과를 얻는 방법은 다양합니다. "적절"하고 "정확하다"는 것은 무엇을 의미합니까? –

li 요소를 같은 줄에 추가하는 더 좋은 방법은 표시를 추가하는 것입니다. 즉, 인라인을 사용하고 float : left를 제거하고 링크에서 display : 블록을 제거하는 것입니다. – abresas

감사합니다. @abresas! – LuxuryMode

적절한 방법은 100 % X-브라우저

#topbar ul { 
    width: /* exact width of the ul */; 
    margin: 0 auto; 
}

DEMO

또 다른 방법은

#topbar { 
    text-align: center; 
} 

#topbar ul { 
    display: inline-block;  
}

하지만 inline-block하지입니다 ... 지금 맞습니다 증명.

DEMO

출처

2012-02-27 21:18:50 paislee

너비가 동적 일 수 있다면 어떨까요? 나는 폭이나 메뉴 같은 코드를 하드 코딩 할 수없는 많은 경우를 알고있다. –

감사! 그리고 수직적으로 어때? 0 마진을 추가하면 수직 센터링이 사라진 것처럼 보입니다. http://jsfiddle.net/luxurymode/PrjJ3/9/ – LuxuryMode

양방향 paislee를 제공하기위한 엄지 손가락. –

쉬운 방법 목록을 폭을주고 0 자동으로 여백을 설정하는 것입니다 :

#topbar ul { 
    list-style-type: none; 
    margin:0 auto; 
    width:300px 
}

출처

2012-02-27 21:21:24 j08691

당신은 항상 당신의 UL의 가치를 알고있는 경우, 첫 번째 부부 답변의 예를 사용하십시오. 너비가 어떻게 될지 모를 경우 약간 다른 방법을 사용해야합니다. li의 float:left;을 display:inline;으로 변경 한 다음 text-align:center;을 ul에 추가하십시오.

출처

2012-02-27 21:28:05

첫째, 브라우저 호환성을 위해 (IE & FF) 인라인 블록, 사용과 : #nav 리에서 그래서

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline;

제거 플로트 : 왼쪽을합니다

#nav li { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    border-right: 1px solid #fff; 
    box-shadow: 1px 0 0 rgba(255, 255,255, 0.1); 
}

을 그런 다음 당신을 중심에 두십시오

#nav { 
    padding: .5em; 
    height: 55px; 
    width: 650px; 
    background-color: #325A8C; 
    text-align: center; 

}

출처

2012-02-27 21:39:12

div에 가로로 가운데를 배치하는 적절한 방법은 무엇입니까?

답변

관련 문제