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

//html
<p class="author-meta">
    <!-- image from Jeremy Keith on Flickr: https://flic.kr/p/dwFRgH -->
    <img class="author-image" src="images/author.jpg" alt="Arthur C. Lark">
    <span class="author-info">
       <span class="author-name">Written by Arthur C. Lark</span>
       <a class="author-email" href="mailto:arthur.c.lark@example.com">
        arthur.c.lark@example.com</a>
    </span>
</p>

//css
<style>
.author-meta{
    text-align: center;
    height: 10em;
    border: 1px solid #ccc;
}
.author-info{
    display: inline-block;
}
.author-info a,.author-info span{
    display: block;
}
.author-image,.author-info{
    vertical-align: middle;
}
</style>

image.png

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

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

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

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

最终效果