폭, 최대 폭 및 사용 margin: auto;
이전 장에서 언급 한 바와 같이, 블록 수준 요소는 항상 사용할 수있는 전체 폭 (왼쪽으로 뻗어 오른쪽 끝까지이 수) 차지합니다.
설정 width 블록 레벨 요소하는 컨테이너의 가장자리까지 뻗어 않도록한다. 수평 컨테이너 내의 요소를 중앙에 그런 다음, 자동으로 여백을 설정할 수 있습니다. 요소는 지정된 폭을 차지하며, 나머지 공간은 두 가장자리 사이에 동등하게 분할된다 :
이 <div> 요소는 500 픽셀의 폭,이 margin 설정 auto .
참고 가진 문제 <div> 위의 브라우저 창 요소의 폭보다 작은 경우에 발생한다. 브라우저는 다음 페이지에 가로 스크롤 막대를 추가합니다.
사용 max-width 대신에,이 상황에서, 작은 창 브라우저의 취급이 향상됩니다. 소형 장치에 사이트가 사용 가능 할 때이 중요하다 :
이 <div> 요소는 500 픽셀의 최대 너비, 그리고이 margin 설정 auto .
팁 :이 div의 차이를 볼 수 미만 500 픽셀 폭으로 브라우저 창 크기를 조정!
다음은 위의 두 div에의 예입니다 :
예
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} »그것을 자신을 시도