HTML Style verticalAlign用法及代码示例

此属性用于设置或返回元素中内容的垂直对齐方式。

用法:

返回VerticalAlign：
```
object.style.verticalAlign
```
设置VerticalAlign：
```
object.style.verticalAlign = value
```

属性：

值	描述
length	用于将元素升高或降低一定长度。
％	它用于按“line-height”属性的百分比升高或降低元素。
baseline	这是默认属性，用于将元素的基线与父元素的基线对齐。
sub	用于将元素对齐为下标。
super	用于将元素对齐为上标。
top	用于将元素的顶部与线上的最高元素的顶部对齐。
text-top	它用于使元素的顶部与父元素的字体的顶部对齐。
middle	用于将元素放置在父元素的中间。
bottom	它用于将元素的底部与该行上的最低元素对齐。
text-bottom	用于将元素的底部与父元素的字体的底部对齐
initial	它用于将VerticalAlign属性设置为其默认值。
inherit	它用于从其父元素继承属性值。

返回值：它用于返回一个字符串，该字符串表示元素中内容的垂直对齐方式。

示例1：显示底部属性

<!DOCTYPE html> 
<html> 
<head> 
    <head> 
       HTML | DOM Style verticalAlign Property 
    </head> 
</head> 
<body> 
    <h1> 
      <center> 
       DOM VerticalAlign Property <button onclick="align()">Press 
        </button> 
      </center>  
  </h1> 
  
   <h3>Clicking on the 'Press' button will align 
     the text vertically at the bottom.</h3> 
  
    <style> 
        table { 
            border:4px solid black; 
            height:200px; 
            width:600px; 
        } 
    </style> 
  
    <table> 
        <tr> 
            <td id="myTd"> 
                <center> 
                  <h1>GeeksforGeeks</h1> 
              </center> 
          </td> 
  </tr> 
</table> 
<br> 
  
<script> 
function align() { 
  
  // Set align bottom. 
  document.getElementById( 
    "myTd").style.verticalAlign= 
    "bottom"; 
} 
</script> 
  
</body> 
</html>

输出：

在单击按钮之前：
单击按钮后：

示例2：显示top属性

<!DOCTYPE html> 
<html> 
<head> 
    <head> 
       HTML | DOM Style verticalAlign Property 
    </head> 
</head> 
<body> 
    <h1> 
      <center> 
      DOM VerticalAlign Property <button onclick="align()">Press 
        </button> 
      </center>  
  </h1> 
  
    <h3>Clicking on the 'Press' button will 
      align the text vertically at the top.</h3> 
  
    <style> 
        table { 
            border:4px solid black; 
            height:200px; 
            width:600px; 
        } 
    </style> 
  
    <table> 
        <tr> 
          <td id="myTd"> 
            <h1> 
              <center>GeeksforGeeks</center> 
            <h1> 
          </td> 
       </tr> 
    </table> 
    <br> 
  
<script> 
function align() { 
    
  // Set align top. 
  document.getElementById( 
    "myTd").style.verticalAlign= 
    "top"; 
} 
</script> 
  
</body> 
</html>

输出：

在单击按钮之前：
单击按钮后：

示例3：显示基线属性

<!DOCTYPE html> 
<html> 
<head> 
    <head> 
       HTML | DOM Style verticalAlign Property 
    </head> 
</head> 
<body> 
    <h1> 
      <center> 
      DOM VerticalAlign Property <button onclick="align()">Press 
        </button> 
      </center>  
  </h1> 
  
    <h3>Clicking on the 'Press' button will align the 
      text vertically with the baseline of the parent.</h3> 
    <style> 
        table { 
            border:4px solid black; 
            height:200px; 
            width:600px; 
        } 
    </style> 
  
    <table> 
        <tr> 
            <td id="myTd"> 
                <h1> 
                  <center> 
                    GeeksforGeeks 
                  </center> 
                  <h1> 
                </td> 
  </tr> 
</table> 
<br> 
  
<script> 
function align() { 
    
  // Set align baseline 
  document.getElementById( 
    "myTd").style.verticalAlign= 
    "baseline"; 
} 
</script> 
  
</body> 
</html>

输出：

在单击按钮之前：

单击按钮后：

示例4：显示初始属性

<!DOCTYPE html> 
<html> 
<head> 
    <head> 
       HTML | DOM Style verticalAlign Property 
    </head> 
</head> 
<body> 
    <h1> 
      <center> 
        DOM VerticalAlign Property <button onclick="align()">Press 
        </button> 
      </center> 
  </h1> 
  
  <h3>Clicking on the 'Press' button will align 
    the text vertically to the initial position.</h3> 
  
    <style> 
        table { 
            border:4px solid black; 
            height:200px; 
            width:600px; 
        } 
    </style> 
  
    <table> 
        <tr> 
            <td id="myTd"> 
                <h1> 
                  <center> 
                    GeeksforGeeks 
                  </center> 
                  <h1> 
                 </td> 
             </tr> 
       </table> 
       <br> 
   
<script> 
function align() { 
   
  // Set align initial 
  document.getElementById( 
    "myTd").style.verticalAlign= 
    "initial"; 
} 
</script> 
  
</body> 
</html>

输出：

在单击按钮之前：
单击按钮后：

示例5：显示继承属性

<!DOCTYPE html> 
<html> 
<head> 
    <head> 
       HTML | DOM Style verticalAlign Property 
    </head> 
</head> 
<body> 
    <h1> 
      <center> 
        DOM VerticalAlign Property <button onclick="align()">Press 
        </button> 
      </center>  
  </h1> 
  
 <h3>Clicking on the 'Press' button will align the 
   text vertically to the inherited position.</h3> 
  
    <style> 
        table { 
            border:4px solid black; 
            height:200px; 
            width:600px; 
        } 
    </style> 
  
<table> 
     <tr> 
        <td id="myTd"> 
             <h1> 
               <center> 
                 GeeksforGeeks 
               </center> 
              <h1> 
            </td> 
          </tr> 
</table> 
<br> 
  
<script> 
function align() { 
    
  // Set align inherit  
  document.getElementById( 
    "myTd").style.verticalAlign= 
    "inherit"; 
} 
</script> 
  
</body> 
</html>

输出：

在单击按钮之前：
单击按钮后：

浏览器支持：下面列出了DOM VerticalAlign属性支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自riarawal99大神的英文原创作品 HTML | DOM Style verticalAlign Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。