行内块布局-上下水平居中显示

//html

    
    
    
       Written by Arthur C. Lark
       
        [email protected]
    

//css

image.png

需要让两个元素的内容垂直对齐，先把它们都转换成行内块，再对它们应用vertical-align:middle

利用高度为100%的伪元素，让middle关键字代表容器的垂直中心点

但作者信息和图片相对于容器块垂直居中对齐，还需要增加一个行内元素，让它占据100%的容器高度。这个元素会让middle关键字认为容器的垂直中点是对齐点。为此可以借助伪元素。

.author-meta:before{
    content: "";
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

最终效果