HTML(23)——垂直对齐方式

垂直对齐方式

属性名：vertical-align

默认情况下浏览器对行内块，行内标签都按文字处理，默认基线对齐

导致图片看起来会偏上，文字偏下。

示例：

   
        div {
            border: 2px solid #333;
        }
        img {
            height: 200px;
        }
    


    
        
        兄弟你好香
    

可以看到图片的下方还有空白。接下来在img内添加vertical-align: middle;

        img {
            height: 200px;
            vertical-align: middle;
        }

发现图片下方空白消失，并且文字也移动到了中间。