如果容器已知高度且容器内需要元素垂直居中，我们可以给容器内添加一个伪元素，设置这个伪元素高度为100%。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ width: 60px; height: 60px; } .author-image, .author-info{ display: inline-block; } .author-email, .author-name{ display: block; } .author-image,.author-info{ vertical-align: middle; } .author-meta{ height: 100px; border: 1px solid #ccc; text-align: center; } .author-meta:before{ content: ''; display: inline-block; vertical-align:middle; height: 100%; } </style> </head> <body> <p class="author-meta"> <img class="author-image" src="img/cat.jpg" > <span class="author-info"> <span class="author-name">sfhufhaisfhiais</span> <a href="" class="author-email">sfasfasfa</a> </span> </p> </body> </html>
效果：
