이미지와 텍스트동시에 사용할때 세로로 정렬하기

이미지와 텍스트동시에 사용할때 세로로 정렬하기 정보

이미지와 텍스트동시에 사용할때 세로로 정렬하기

본문

안녕하세여...그누팁은 아니지만,
이미지와 텍스트를 동시에 사용할때 이미지크기를 텍스트 크기랑 마춰도 이미지랑 텍스트가 따로따로 놉니다. (위..아래로)

저도 검색해서 찾은건데, 한방에 해결했습니다..

위의 그림처럼, 테이블하나에 이미지랑 텍스트를 세로로 정렬시킬수 있습니다.

그누에서 아무리 찾아봐도 방법이 없길래...퍼왔습니다.

퍼온곳 링크 : http://miya.pe.kr/archives/73
중복이거나 잘못된 정보라면 자삭하겠습니다...알려주세여...

우선, 스타일을 아래처럼 만듭니다.

<style type="text/css">
div.centeringTest {
    width: 100%;
}
div.centeringTest p {
display: table-cell;
vertical-align: middle;
margin: 0;
    padding: 1em;
}
div.centeringTest p.text {
    width: 20em;
    background-color: orange;
}
</style>


그리고, 사용하는곳의 소스는 아래와 같습니다.

<div class="centeringTest">
    <p><img src="이미지주소"></p>
    <p class="text">들어갈 텍스트</p>
</div>

댓글 10개

Marlboro 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

09.10.27 02:21:42

참고로 지원브라우져가

- 파이어폭스 1, 2
- 넷스케이프 6, 7.1
- 사파리 2, 3
- 오페라 9.2 이상
- IE 5.01, 5.5, 6, 7 ( inline-block 으로 구현 )

라고 하네요.....IE 8버전은 이거 적용안해도 vertical-align:middle; <= 이게 먹힌다고 하네요.