분명히 좀더 편리하고 쓰기 좋게 하고자 그러는 걸텐데, 쓰면 쓸수록 불편하기만 하다.
Table 로 구현 할때보다 불편한 것 중, 대표적인것이 세로 가운데 정렬.
원래는 "vertical-align:middle;" 하면 가운데 정렬이 되어야 하는데, "div" 태그는 이게 안된다.
그렇기 때문에 온갖 편법이 다 동원되는데... (주로 margin 넣기, position:absolute 로 위치 맞추기 등...)
이런것 결국 편법이라 뭔가 변경 사항이 있을때 틀어지기 쉽다.
결국 제일 쉬운 해결법은 그냥 "Table" 태그를 쓰는것... 이지만, 테이블은 절대 안된다고 하는 곳이 있으니, 아쉬운대로 Div 태그에 Table 속성을 부여 해서 해결 한다.
#div {display:table-cell; width:150px; height:45px;}
이런식으로 가운데 정렬할 div 에 display:table-cell 속성을 지정하면, div 태그내의 내용이 마치 테이블 셀처럼 정렬이 된다.
근데... 버그인지 몰라도 width 값이 숫자 값이면 문제가 없는데, width 값이 100% 처럼 비율값일 경우 이상하게도 넓이 값이 지정이 안된다.
이럴경우...
이렇게 가운데 정렬을 할려는 div 를 div 로 감싼뒤 그 div 의 속성을 "display:table" 로 지정해 주고, 그 하위 div 의 속성을 "display:table-cell" 로 지정하면 넓이를 100% 로 지정할 수 있다.
그러면 이렇게 가운데 정렬이 됨.
