css 图片文字垂直居中

先来看张图片

相信很多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>

成功不是终点，失败也并非末日，重要的是前行的勇气！