div 정렬 썸네일형 리스트형 div 좌우 배열 정렬하기 html 요소에 대해서 포스팅 했을때 요소에 대해서 한번 언급했지만, div는 블럭 요소로 가로값이 얼마든지 공간을 다 차지해 버리기 때문에 자동으로 줄바꿈이 됩니다. div 가운데 정렬은 동적일 때, 가로값이 픽스 되었을 때 두 가지를 함께 전에 포스팅 했으니, 오늘은 div를 좌우로 배열하는 법을 포스팅하겠습니다. div를 좌우로 인라인요소처럼 배열하고 싶을때는 선 객체에 float:left;로 왼쪽 정렬을 설정하고, 뒤에 오는 객체는 display:inline-block;로 내용 영역을 채워줍니다. 아래 소스를 첨부했으니 테스트 해보세요. div 가운데 정렬 (세로) 오늘은 div를 세로로 중앙정렬 하는법에 대해서 알아보려고 합니다. 예전에 div가로로 가운데 정렬하는 법을 포스팅 했었는데요! 그 내용이 궁금하신 분은 아래 링크를 클릭하시면 됩니다~ div 가운데 정렬 보러가기 div 가운데 정렬처럼 세로 중앙 정렬도 아주 간단하니까~ 한번 따라해보세요! div 가운데 정렬 (가로) 테이블에서는 align="center" 을 사용하면 가운데 정렬이 쉽게 되지만 div 같은 경우에는 그렇지 않습니다. 예전에는 position:relative; left:50%; margin-left:-(컨텐츠 가로값의 반)px; 을 이용해서 div를 정렬했는데, margin:0 auto; 만 넣어주면 간단하게 해결됩니다. margin:0 auto; 을 사용하다보면 ie8 에서는 안먹힐 때가 종종있는데 그럴때는 상위 div에 text-align="center" 속성을 추가해 줍니다. 그런데 margin:0 auto;같은 경우는 .box 의 가로값이 픽스되었을때 가능한 정렬법입니다. (위와 같이 작업을 하고 가로값을 써주지 않으면 가운데 정렬이 안된다는;;;;) 만약에 .box의 가로값이 유동적이고 픽스되.. 이전 1 다음
