DIV 가운데 정렬 입니다
지난 시간에 HTML을 이용해서 가운데 정렬이라는 기본적인 것을 알아봤는데요 웹표준 방식을 사용하면 크로스 브라우저 적용도 포함해서 신경 쓰면서 작업을 해야 합니다. 처음 부터 웹표준 방식을 익히면서 지식을 쌓아간다면 금방 이런 문제들은 쉽게 하실 수 있을 겁니다. 크로스 브라우저는 모든 브라우저에 별로 깨지지 않도록 나와야 한다는 겁니다.
DIV 태그를 사용하면 가운데 정렬이 가로뿐만 아니라 세로에도 필요할 때가 있습니다. 세로일 때는 사용하는 방식이 조금 다릅니다.
이번 시간엔 좀 더 세밀하게 알아보는 시간을 가져보겠습니다.
DIV 태그 기본 사용법을 보겠습니다.
<div style="text-align:center">텍스트 가운데 정렬</div>
이렇게 스타일로 사용되는데요
style 에서 text-align:center 을 사용하면 가운데 정렬이 됩니다.
텍스트 대신 다른 오브젝트 태그나 바로 텍스트가 들어가기도 합니다.
기본 div 예제를 브라우저에서 보면 텍스트와 이미지가 가운데 정렬 된것을 확인할 수 있습니다.
text-align:center 은 가로 가운데 정렬이 되지만 세로는 되지 않습니다. vertical-align 을 사용해야 합니다.
아래 예제에서 border:solid 1px red; 는 없어야 하는건데 일부러 보이기 쉽게 하기 위해 border 값을 준 것입니다.
높이에 대한 정렬은 vertical-align:middle; 값을 사용합니다.
<div style=" display:table-cell; width:400px; text-align:center; vertical-align:middle; height:400px;"> <img src="img/sss1.jpg" width="90" height="90" /> </div> |
브라우저에서 보면 일부러 표시된 빨강색 박스 안에 가운데 정렬이 된것을 확인할 수 있습니다.
이번엔 % 로 적용해보겠습니다. 백분율로 위치를 표시하면서 적용할 일도 많습니다.
위치 값으로 position:absolute;top:50% 를 사용하면 화면에 50%에 위치하게 됩니다.
<div style="display:table; height:100%; width:100%; overflow:hidden;text-align:center"> <div style=" position:absolute;top:50%;display:table-cell; vertical-align:middle;"> <img src="img/sss1.jpg" width="90" height="90" /> </div> </div> |
실행을 해보면 화면 세로 가운데 위치된것을 확인할 수 있습니다.
이상 div 태그의 정렬 방법을 알아 보았습니다.
