CSS 탐색 표시 줄 - 탐색 모음 내의 요소를 기준으로 센터링

Question

네 개의 요소가있는 탐색 모음을 만들려고합니다. 두 개의 작은 단추는 홈페이지와 연락처 페이지로 연결되며 두 개의 큰 단추는 사이트의 두 가지 주요 섹션. 저는 두 개의 큰 버튼이 가운데에 놓이고 두 개의 작은 버튼이 왼쪽에 위치하는 방식으로 물건을 배치하려고합니다.

"margin : 0 auto;"할 수 없습니다. 자신의 div 안에있는 두 개의 큰 버튼을 "display : block;"으로 설정해야합니다. 작은 버튼보다 다른 라인에 그들을 설정하고, 절대적으로 물건을 배치하는 것은 브라우저 창이 바뀌 자마자 레이아웃을 엉망으로 만든다.

나는 여기서 간단한 것을 놓치고있는 것처럼 느껴집니다. 내가 잘못된 각도에서 이걸 할거야?

는 여기에 내가 지금 무엇을의 Dabblet ... http://dabblet.com/gist/6287837

HTML을의

<div id="nav-container"> 
<div id="small-button-container"> 
    <img src="http://placehold.it/47x22" class="small-button01" /> 
    <img src="http://placehold.it/70x42" class="small-button02" /> 
</div> 
<div id="big-button-container"> 
    <img src="http://placehold.it/360x64" /> 
    <img src="http://placehold.it/360x64" /> 
</div> 
</div> 

CSS

#nav-container{ 
outline: 1px red dashed; 
width: 1000px; 
display: block; 
margin: 0 auto;} 

#small-button-container{ 
display: inline-block; 
width: 136px; 
position: relative; 
top: -22px; 
left: 40px;} 

#big-button-container{ 
display: inline-block; 
width: 780px; 
height: 64px; 
margin-left: 70px;} 

.small-button01{ 
display: inline; 
position: relative; 
left: 5px;} 

.small-button02{ 
display: inline; 
position: relative; 
left: 15px;} 

Answer 1

당신은 당신의 #small-button-container에 position: absolute;을 적용 할 수 있습니다

때문에 큰 버튼이 중앙에 위치합니다.

부모 컨테이너에 position: relative;을 넣으므로 #small-button-container이 부모 컨테이너와 관련하여 절대적으로 배치됩니다.

CSS 위치뿐만 아니라

#nav-container { 
    outline: 1px red dashed; 
    width: 1000px; 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
} 
#small-button-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Demo

Answer 2

: 절대 당신은 또한 당신이 #small의 계산 된 폭을 알고있는 경우 #의 탐색 컨테이너에 부정적인 왼쪽 여백을 사용해 볼 수 있습니다 버튼 컨테이너. # -nav-container에 text-align : center를 사용할 수 있습니다. div이기 때문에 display : block도 사용할 필요가 없습니다. # 작은 버튼 컨테이너에 추가 패딩이 있다면 이것을 고려해야합니다.

#nav-container { 
    margin: 0px auto; 
    text-align: center; 
    margin-left: -136px; 
}