원본 본문으로 이동하기

CSS 가운데 정렬

루아 - 가로 중앙 정렬 폭이 정해진 블럭 요소 auto는 마진의 왼쪽과 오른쪽 여백이 동일하게 나눠짐을 의미한다. p { width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */ margin: 0 auto; } 가변폭인 블럭 요소 ie8 이상 가운데 정렬이 되는 것은 item 클래스의 요소이다. 인라인 요소도 가능 <style> .horizon{ display: table; margin-left: auto; margin-right: auto; } </style> <div class="horizon"> <div class="item">block item</div> </div> ie6 ~ 7 호환 <style> .horizonCont{ text-align: center; } .horizon{ display: table; margin-left: auto; margin-right: auto; display: inline-block; } </style> <div class="horizonCont"> <span class="horizon"> <span class="item" style="display:block">block item</span> </span> </div> inline-block을 지원하지 않는 브라우저는 display: table과 margin을 적용받아 가운데 정렬이 되고, 나머지 브라우저에서는 text-align: center와 display: inline-block이 적용되어 가운데 정렬이 된다. 포지션이 absolute일 때 포지션이 absolute일 때 중앙정렬 (가로 + 세로) left와 top을 50%로 준 뒤 margin-top: -(요소의 height/2); margin-left: -(요소의 width/2); 를 해준다 <style> .align_center{ position:absolute; width:100px; height:50px; left:50%; top:50%; margin-left:-50px; margin-top:-25px; </style> <div class="align_center"> <p>중앙정렬 (가로 + 세로)</p> </div> 세로 중앙 정렬 테이블안의 요소 정렬 <style> table { vertical-align: middle; } </style> div태그의 display속성을 table로 설정하는 방법 <style> #wrapper { display: table; } #cell { display: table-cell; vertical-align: middle; } </style> <div id="wrapper"> <div id="cell"> <div class="content">내용내용</div> </div> </div> 높이가 변해도 상관없다(CSS에 높이를 지정하지 않아도 된다). wrapper에 공간이 없어도 내용이 잘리지 않는다. IE7 이하에서 작동하지 않는다. absolute 속성을 이용하는 방법 <style> #content { position: absolute; top: 50%; height: 240px; margin-top: -120px; } </style> <div id="content">내용내용</div> float 속성을 이용하는 방법 <style> #floater {float:left; height:50%; margin-bottom:-120px;} #content {clear:both; height:240px; position:relative;} </style> <div id="floater"></div> <div id="content"> Content Here </div> 모든 브라우저에서 작동한다. 충분한 공간이 없을 때 (예컨대 윈도우 사이즈를 줄일 때) 콘텐츠가 잘리고 스크롤바가 나타난다. line-height 속성을 이용하는 방법 텍스트일때만 작동한다. 공간이 없어도 잘리지 않는다. 한 줄 이상이 되면 깨진다. <style> #content { height: 100px; line-height: 100px; } </style> <div id="content">Content Here</div> - HTML CSS