先來看張圖片
相信很多css新手遇到過這種問題，就是當圖片和文本顯示在一行的時候，效果很奇葩，文字和圖片沒法對齊，
這時我們需要做的是：
1，先給塊級元素設置 display: inline-block; （行內的塊級元素）
2，給圖片設置高度，文本盒子不設置高度
3，給圖片和文本都設置 vertical-align: middle;
4，搞定，看效果吧
順便貼一下示例代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圖片文字垂直居中</title> 6 <style type="text/css"> 7 img{ 8 width: 100px; 9 height: 60px; 10 vertical-align: middle; 11 } 12 div{ 13 vertical-align: middle; 14 display: inline-block; 15 } 16 </style> 17 </head> 18 <body> 19 <img src="img/pic.jpg"/> 20 <div>縱然只有倒下才是終點，我只有未來沒有從前。</div> 21 </body> 22 </html>