當我們給一個元素（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>
最終效果如下：
