2007.05.26 12:04

이미지와 글씨 정렬

허접한 팁 하나 올려 드립니다..

제가 잘 몰랐던 부분이여서 다 아는 내용을 팁이라고 올리는지 모르겠습니다..
아이콘 같은게 가끔 글씨와 제대로 정렬이 안되서 애먹은 적이 가끔 있었던지라 저와 같이
대충 짐작으로 정렬시켰던 분들 참고 하시면 될듯...

<td><img src="icon.gif " align="texttop">이미지와 글씨의 상단끝이 같게</td>
<td><img src="icon.gif " align="absmiddle">이미지와 글씨의 중간이 같게</td>
<td><img src="icon.gif " align="absbottom">이미지와 글씨의 하단끝이 같게</td>


<td valign="top"><img src="icon.gif " align="texttop"></td>
- 테이블 상단에서 이미지와 글씨의 상단끝이 같게
<td valign="top"><img src="icon.gif " align="absmiddle"></td>
- 테이블 상단에서 이미지와 글씨의 중간이 같게
<td valign="top"><img src="icon.gif " align="absbottom"></td>
- 테이블 상단에서 이미지와 글씨의 하단끝이 같게

<td valign="middle"><img src="icon.gif " align="texttop"></td>
- 테이블 중간에서 이미지와 글씨의 상단끝이 같게
<td valign="middle"><img src="icon.gif " align="absmiddle"></td>
- 테이블 중간에서 이미지와 글씨의 중간이 같게
<td valign="middle"><img src="icon.gif " align="absbottom"></td>
- 테이블 중간에서 이미지와 글씨의 하단끝이 같게

<td valign="bottom"><img src="icon.gif " align="texttop"></td>
- 테이블 하단에서 이미지와 글씨의 상단끝이 같게
<td valign="bottom"><img src="icon.gif " align="absmiddle"></td>
- 테이블 하단에서 이미지와 글씨의 중간이 같게
<td valign="bottom"><img src="icon.gif " align="absbottom"></td>
- 테이블 하단에서 이미지와 글씨의 하단끝이 같게

너무 허접한 팁을 자세하게 설명드린 점 양해를 바라고
첨부 이미지 참고....


덧글1 :

한눈에 쏙 들어오는 예제까지.. 수고하셨습니다..
그런데.. 이왕이면 표준에 맞게끔 쓰는것이 좋겠지요..
style="vertical-align: 스타일;"
스타일에는 *%, inherit, baseline, sub, super, top, middle, bottom, text-top, text-bottom 등이 있겠습니다.^^
그럼 수고하세요~


덧글2 :

'소프트웨어 > Css • Xhtml' 카테고리의 다른 글

이미지와 글씨 정렬  (0) 2007.05.26
이미지없이 라운드 테이블 만드는 CSS  (0) 2007.01.10
Trackback 1 Comment 0