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

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




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

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

퍼온곳 링크 : 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>
<!--[if lte IE 7]>
<style type="text/css">
div.centeringTest p {
 display: inline;
 zoom: 1;
}
</style>
<![endif]-->


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


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