css를 사용한 중앙정렬

html/css 2008. 10. 9. 14:19
css속성중에 'margin'이란 속성이 있는데 이걸 이용해서 block element에 대해서 중앙 정렬을 할 수가 있다.
div { margin: 0 auto }
위와 같이 css에 div태그에 대해 auto속성을 주면 중앙 정렬을 할 수가 있다.
요즘에 css코딩이 대세인지라 페이지 레이아웃을 div로 잡기 때문에 중앙 정렬을 하기 위해선 위와 같은 방법을 쓰는 것 같다.

참조 : http://wiki.standardmag.org/css_align

--
이것 때문에
<div style="width: 200px; height: 20px; border:1px solid #000;">
    <div style="width:1px: border:1px solid #000">|</div>
<div>
위와 비슷하게 코딩을 해서 보니 좌측정렬이 돼야 하는데 중앙정렬만 계속 돼서 삽질..;;
그래서 style에 margin:0을 선언해서 해결했다.

<div style="width: 200px; height: 20px; border:1px solid #000; margin:0; text-align:left;">
    <div style="width:1px: border:1px solid #000; margin:0;">|</div>
<div>


: