이미지 가운데 정렬문제

[드럼캡]

웹표준으로 이렇게 저렇게 해서 거의제작 했습니다.
그런데 갤러리를 만들고 있는중인데 이미지 가운데 정렬을 시키는것을 어떻게 해야할지 정말 모르겠군요.
물론 이미지의 width를 알면 absolute로 가면 되지만 이미지의 width를 모를경우 어떻게 하면 좋을까요? 갤러리 View 페이지 처리하는것이 아주 난감합니다.
고수님들의 좋은 혜안 기다립니다.~~~

[박민권]

좌우정렬은 간단하지만 상하중앙정렬은 어렵습니다.

간단한 좌우정렬은 text-algin: center이겠죠.

blcok의 좌우정렬은 아래와 같습니다.

Code: Select all

<div style="widht:너비;">
    <img src="" style="display:block; margin: 0 auto;"/>
</div>

margin의 좌우 값을 auto로 주면 외부 여백이 좌우균등이 잡혀서 중앙정렬이 되지만 상하정렬은 딱히 간단한 방법이 없습니다.
상하정렬도 하시겠다면 CSS속성중 display: table-cell로 테이블의 셀처럼 쓸 수 있지만 IE가 지원하지 않습니다.

때문에 이럴 경우 테이블을 써보세요.
접근성을 고려해주시면 테이블을 쓰더라도 괜찮다고 생각합니다.
만드시려는 갤러리 구조는 잘 모르겠지만 <th scope=""> <thead> <caption>등을 적절히 사용하여 만든다면 접근성이 떨어지지는 않을거라 생각합니다.

[drumcap]

오.. 정말 감사드립니다.
사실 margin 을 auto로 잡았지만 정렬이 안되서 img가 블록형태가 아니라서 안되는것을 알고 그 방법을 포기했었는데 이렇게 display를 block으로 잡아주면 되는군요.
정말 갑사드립니다~