当我们给一个元素（display为inline-block）的vertical-align设置为middle，我们会发现这个元素并没有垂直对齐。并且发现这个元素的高度的中心点，会在所有兄弟元素中高度最高的元素的底部靠上一点。
如下所示
解决方法：
给当前和它的兄弟元素都添加vertical-align设置为middle
<!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; } </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>
最终效果如下：
