vertical-align 的特点

• 定义 行内元素 的基线相对于该元素所在行的基线的垂直对齐。
• 当被指定为负长度值和百分比值，会使元素降低而不是升高。
• 在 表单元格 中，这个属性会设置单元格框中的单元格内容的对齐方式。
• JavaScript 语法： object.style.verticalAlign="bottom"

demo 使用 vertical-align 将图片与文字底部对齐

            
                            
    
            
     
                testrealityparagragh                            
        
    
    

图片与文字的底部对齐

demo vertical-align 使其行内的文字之间基线对齐

图片尽量不要与文字基线(baseline)对齐

demo vertical-align 图片与文字居中对齐

图片与文字都在一个 p 标签之内的居中对齐

vertical-align 属性失效

            
                            
    
            
     
                testrealityparagragh                            
        
    
    

单纯设置 display: flex; 的情况

再次添加 items-align: flex-end; 时候的情况

改成 items-align: flex-end; 时候的情况，此时行内所有元素都是垂直居中

Reference