html 태그에서 align 하고 valign 차이점과 정렬 방식

아래 소스를 보면 정확히 이해 할 수 있습니다.

align는 p,img,table,td,tr,div,span... 등 가지고 있고(속성값 left,center,right <- 가로 정렬에 쓰임)

valign는 td,div,span.. 주로 많이 쓰입니다.(속성값  top,middle,bottom <- 세로 정렬에 쓰임)

<table width="600" border="1" cellpadding="0" cellspacing="0">
  <tr height="90" valign="top">
 <td width="33%" align="left">
    1. 왼쪽정렬과 상단정렬
 </td>
 <td width="33%" align="center">
    2. 가운데정렬과 상단정렬
 </td>
 <td width="34%" align="right">
    3. 오른쪽정렬과 상단정렬
 </td>
  </tr>
  <tr height="90" valign="middle">
 <td align="left">
    4. 왼쪽정렬과 중앙정렬
 </td>
 <td align="center">
    5. 가운데정렬과 중앙정렬
 </td>
 <td align="right">
   6. 오른쪽정렬과 중앙정렬
 </td>
  </tr>
  <tr height="90" valign="bottom">
 <td align="left">
    7. 왼쪽정렬과 하단정렬
 </td>
 <td align="center">
    8. 중앙정렬과 하단정렬
 </td>
 <td align="right">
    9. 오른쪽정렬과 하단정렬
 </td>
  </tr>
  </table>

보통, 한 라인에 글자는 크고 그림이 작아 그림이 아래쪽으로 쳐져 보일때나 글자는 작고 그림이 커서 글자가 쳐져 보일때

이럴때, 테이블내(투명한 테두리)에 텍스트와 이미지가 있는 줄에서 사용하여 글자와 그림을 중앙 정렬할때 사용하면 됩니다.


또, absolute middle  - 무조건 가운데로 정렬시켜라는게 있는데
 
보통 가로 정렬을 잘 되는데, 세로 정렬을 해도 이미지가 세로 정렬이 잘 안될때 사용하면 됩니다.

이미지와 글자의 높낮이 정렬문제는 align="absmiddle"를 쓰면 됩니다.

<img src="이미지주소" align="속성" align="absmiddle"> 글자와 정렬