是这样婶儿的，今天呢，想学习flex布局来着，然后突然就说到了vertical-align，这么一涉及不要急，学到老活到老的我瞬间就放弃了flex的学习【暂停而已】，转战到了vertica-align的学习，没关系，谁让自己在这条路上就是一傻白甜咧~
对于vertical-align，我的认知并没有多少，仅有的六级词汇量告诉我这个直白点儿翻译就是垂直着对齐。理解字面意思很简单，但是怎么用就很难了。
这里看了张老师的博客，简单做一个小总结。
首先想要用vertical-align，你就要知道人家依赖什么，vertical-align依赖inline-block，就是我们说的果冻元素，可吸可咬。那么依赖这个元素又能说明什么呢？说明你喵的用个div写就是不行的呀！
还有一点很重要的就是，你写的内容要在你父元素里面，这里写一个例子。先拿文字做实验吧。还有一点就是，通常我用就是用vertical-align：middle；属性，所以这里也只写这个。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>手机适配问题</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span{
display: inline-block;
4px;
height: 4px;
background: #f66;
vertical-align: middle;
}
div{
color: #fff;
background: #000;
}
</style>
</head>
<body>
<div id="main">
<span>
</span>我是一段很呆萌的文字！
</div>
</body>
</html>
上面需要知道的是，我直接写在了div里面也是可以的。但是要保证里面的span或者是别的东西是inline-block；
下面涉及到另一个东西，那就是line-height，有这个的话，对齐就还依赖这个属性的值：
上面的代码，div加上line-height：100px；就是这样啦：
接下来就是关键了！就是我一直用却总是失败的一点，关于图片居中垂直对齐文字的例子。：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
100px;
height: 60px;
vertical-align: middle;
}
div{
color: #fff;
background: #f00;
padding-left: 10px;
line-height: 100px;
}
</style>
</head>
<body>
<div id="main">
<img src="../bootstrap/dist/images/firefox-big.jpg"/>我是一段很呆萌的文字！
</div>
</body>
这样就很完美的解决啦！还蛮好用的，可以试试呀！