ویژگی vertical-align

ویژگی vertical-align تراز عمودی یک عنصر را تعیین می کند. مقادیر معمول استفاده شده top، middle و bottom هستند.

مثال زیر نحوه چیدمان عمودی متن بین جدول را نشان می دهد.

HTML : 

<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
   <tr>
      <td class="top">Top</td>
      <td class="middle">Middle</td>
      <td class="bottom">Bottom</td>
   </tr>
 </table>

CSS : 

 td.top {
    vertical-align: top;
 }
 td.middle {
    vertical-align: middle;
 }
 td.bottom {
    vertical-align: bottom;
 }
نتیجه کد
TopMiddleBottom


ویژگی vertical-align مخصوص خانه های جدول است و اگر بخواهید عناصری مانند div را تراز عمودی دهید باید ویژگی display آن را به table-cell تغییر دهید.

مثال : 

<div style="vertical-align:middle;height:100px;display:table-cell" > text </div>