vertical-align Property

Home > Document > CSS > Text > vertical-align

vertical-align Property

vertical-align Property는 Table Cell 같은 Box 속에 들어 있는 내용물의 수직정렬을 지정하는 Property입니다. 또 text사이에 그림이 들어갈 때 글씨를 그림 하단에 위치시킬 것인지 아니면 하단 등에 위치 시킬 것인지를 지정합니다. 아래의 DHTML 들을 참조 하세요.

[표 보는 방법]

vertical-align Property
Value	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| <percentage> \| <length> \| Inherit
Initial	baseline
Applies to	inline-level and 'table-cell' elements
Inherited	yes
Percentages	refer to the 'line-height' of the element itself, element 자신의 행 간격에 따라서.
Media	Visual
HTML Syntax	{ vertical-align: sAlign }
Scripting	object.style.verticalAlign [ = sAlign ]

CSS Scripting

onMouseOver="this.style.verticalAlign='super';"

text 끼리의 vertical-align Property

ABCDEF ABCDEF

baseline

sub

super

top

text-top

middle

bottom

text-bottom

위의 DHTML 중에서 top 과 text-top, bottom 과 text-bottom 은 변화가 없는데 tex-top, text-bottom 같은 text 끼리는 작동하지 않아서 그렇습니다.

vertical align Property DHTML source

<HTML>
    <HEAD>
        <TITLE>vertical align Property</TITLE>
    <STYLE type="text/css">
    <!-- 
    .td_btn {height:18px;
    background-color:royalblue;
    border:1px solid #808080;
    cursor:pointer;
    font:11px;
    color:#EFEFEF;
    text-align:center;
    }  
    -->
    </STYLE>
    </HEAD>
    <BODY>
      <FIELDSET style="border:2px solid #225588;width:100%;cursor:default;">
        <LEGEND style="color: #a52a2a;font: 12px; font-weight: bold;font_family:Arial;">
        vertical-align Property
        </LEGEND><BR><BR>
        
        <CENTER>
          <SPAN style="background-color:gold;font-size:48px;text-decoration:underline overline">
          ABCDEF
            <SPAN id="span_1" style="font-size:12px;text-decoration:underline overline;
            background-color:red;">
            ABCDEF
            </SPAN>
          </SPAN>
        </CENTER><BR><BR><BR>
        
        <table border="1" cellspacing="5" width="100%" frame="void">
          <tr>
            <td class="td_btn" onClick="span_1.style.verticalAlign='baseline';">baseline</td>
            <td class="td_btn" onClick="span_1.style.verticalAlign='sub';">sub</td>
            <td class="td_btn" onClick="span_1.style.verticalAlign='super';">super</td>
            <td class="td_btn" onClick="span_1.style.verticalAlign='top';">top</td>
            <td class="td_btn" onClick="span_1.style.verticalAlign='text-top';">text-top</td>
            <td class="td_btn" onClick="span_1.style.verticalAlign='middle';">middle</td>
            <td class="td_btn" onClick="span_1.style.verticalAlign='bottom';">bottom</td>
            <td class="td_btn" onClick="span_1.style.verticalAlign='text-bottom';">
              text-bottom
            </td>
            </tr>
        </table>
      </FIELDSET><BR><BR>    
    </BODY>
</HTML>

그림과 text와의 vertical-align Property

글씨와 이미지가 AA18 (7K)

같은 Line 속에 있을 경우