GreenBean

div 안에서 image들을 중앙정렬로 맞추려면 고정된 크기의 경우에는 padding이나 margin 으로 맞추면 간단하지만, 크기가 제각각 경우에 따라 다를 경우에는 맞추기가 힘들다. 테이블을 쓰는게 편하지만, IE의 경우 appendChild로 Table을 만들 경우에는 제대로 렌더링이 되지 않는 경우가 있다.(이때는 다시 innerHTML로 소스를 다시 적어주면 제대로 렌더링이 된다.)

여러가지 고민하다가 발견 한 방법은 div의 height와 동일 한 크기로 1px짜리 transparent gif파일을 만들어서 앞이나 맨 뒤에 넣으면 된다.

그리고 div안의 image들을 style로 vertical-align:middle로 지정하면 끝. image의 vertical-align은 가장 큰 Height에 기준해서 중앙정렬을 하기 때문에, 이렇게 하면 transparent로 된 이미지 파일을 기준으로 중앙정렬이 된다.

div사이즈가 바뀔 경우는?
-자바스크립트로 기 transparent gif 파일의 width를 바꾸면 된다.