HTML | DOM 样式 verticalAlign 属性

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

句法：

• 返回 VerticalAlign ：

  object.style.verticalAlign

• 设置垂直对齐：

  object.style.verticalAlign = value

特性：

Value	Description
length	It is used to raise or lower an element by some given length.
%	It is used to raise or lower an element in percentage of the “line-height” property.
baseline	It is the default property, which is used to align the baseline of the element with the baseline of the parent element.
sub	It is used to align the element as a subscript.
super	It is used to align the element as a superscript.
top	It is used to align the top of the element with the top of the tallest element on the line.
text-top	It is used to align the top of the element with the top of the parent element’s font.
middle	It is used to place the element in the middle of the parent element.
bottom	It is used to align the bottom of the element, with the lowest element on the line.
text-bottom	It is used to align the bottom of the element with the bottom of the parent element’s font
initial	It is used to set VerticalAlign property to its default value.
inherit	It is used to inherit property values from its parent element.

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

示例 1：显示底部属性

    
       HTML | DOM Style verticalAlign Property
    


    
      
       DOM VerticalAlign Property Press
        
       
  
  
   Clicking on the 'Press' button will align
     the text vertically at the bottom.
  
    
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    
  
    
        
            
  
                
                  GeeksforGeeks
              
          


  

function align() {
  
  // Set align bottom.
  document.getElementById(
    "myTd").style.verticalAlign=
    "bottom";
}

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：显示 top 属性

    
       HTML | DOM Style verticalAlign Property
    


    
      
      DOM VerticalAlign Property Press
        
       
  
  
    Clicking on the 'Press' button will
      align the text vertically at the top.
  
    
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    
  
    
        
          
       
    
            
              GeeksforGeeks
            
          
    
  

function align() {
    
  // Set align top.
  document.getElementById(
    "myTd").style.verticalAlign=
    "top";
}

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 3：显示基线属性

    
       HTML | DOM Style verticalAlign Property
    


    
      
      DOM VerticalAlign Property Press
        
       
  
  
    Clicking on the 'Press' button will align the
      text vertically with the baseline of the parent.
    
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    
  
    
        
            
  
                
                  
                    GeeksforGeeks
                  
                  
                


  

function align() {
    
  // Set align baseline
  document.getElementById(
    "myTd").style.verticalAlign=
    "baseline";
}

  

输出：

在点击按钮之前：

点击按钮后：

示例 4：显示初始属性

    
       HTML | DOM Style verticalAlign Property
    


    
      
        DOM VerticalAlign Property Press
        
      
  
  
  Clicking on the 'Press' button will align
    the text vertically to the initial position.
  
    
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    
  
    
        
            
             
       
                
                  
                    GeeksforGeeks
                  
                  
                 
       
   

function align() {
   
  // Set align initial
  document.getElementById(
    "myTd").style.verticalAlign=
    "initial";
}

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 5：显示继承属性

    
       HTML | DOM Style verticalAlign Property
    


    
      
        DOM VerticalAlign Property Press
        
       
  
  
 Clicking on the 'Press' button will align the
   text vertically to the inherited position.
  
    
        table {
            border: 4px solid black;
            height: 200px;
            width: 600px;
        }
    
  

     
        
          
             
               
                 GeeksforGeeks
               
              
            


  

function align() {
    
  // Set align inherit 
  document.getElementById(
    "myTd").style.verticalAlign=
    "inherit";
}

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

浏览器支持： DOM VerticalAlign 属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器