CSS行内对齐的黑魔法
推广 | 令人窒息的奖品等你―2016最权威的全球开发者调研
本文和以前的文章类似，orange 尽量带给大家分享实际项目中的坑怎么填，当然只是提供思想，方法很多欢迎讨论，还有就是对于刚上手前端的新人不是特别友好，没关系，涉及到基础知识我会对应的进行指引，给出链接或给出提示，大家可以自行 Google(百度)。
说到行内对齐大家可能会想到类似水平对齐，垂直对齐总结类型的文章，既然我们叫 黑魔法 就不会是基础的对齐教程，基础教程的文章好多，大家想必都知道多种方法实现对齐
<!--more-->
项目背景
还是 orange 所在公司的移动端项目，上案例
截多了，咱们只看第一行的文字，算是每一天都有的 title，有人说: TMD 你在逗我?这有什么可讲的谁都会写好不好!
先别激动，我当然不是解释这个布局怎么实现的，简单的例子更容易解释问题，继续往下看初步实现的代码，
<div class="date-wrap"> <span class="date">14 OCT</span> <span class="multiple">x</span> <span class="desc">今日瞎选6篇</span> </div> <style type="text/css"> .date-wrap { width: 100%; height: 60px; position: relative; text-align: center; line-height: 60px; font-size: 18px; font-weight: 600; } .multiple { color: #f8ac08; } </style>截图如下
细心的朋友看出问题了，看不出也没关系，我们加两条辅助线嘛!
<div class="date-wrap"> <span class="date">14 OCT</span> <span class="multiple">x</span> <span class="desc">今日瞎选6篇</span> <div class="line-top"></div> <div class="line-bottom"></div> </div> <style type="text/css"> /* 这里是前面的样式，不重复给出 */ .line-top { width: 100%; height: 1px; position: absolute; left: 0; top: 21px; background-color: #000; } .line-bottom { width: 100%; height: 1px; position: absolute; left: 0; bottom: 21px; background-color: #000; } </style>效果如下
好，相信大家现在一目了然存在的问题了，那就是前面的 date 并没有垂直居中，原因呢!解释起来也简单
这里只需要修改一行代码就能回答大家的疑问
<span class="date">14 OCT orange</span>将上文对应 html 修改后，得到截图
这个让我不禁想起了小学英语作业本的四线格，哈哈，大写字母的确都在上方的两个格，而小写上中下都有例子，单独看 g，很好解释上面的显现了吧。
看似简单的案例还就是这么特殊，恰巧都是数字和大写字母，细心的还会发现后面的 6 也有问题，一不留神，不居中了，设计来找你，你一脸蒙逼的说我是按照居中写的啊，解决不了了?
不是的，我们接下来就是解决这个问题的，现实项目要更复杂一些，有经验的前端知道字体间的差异，个别的字体上下相差特别悬殊，
这里前后的字体是不同的，但幸好垂直方向的差异不是很大，这里我引入了项目原有的字体，中间的 x 其实是个 svg 这里不赘述。因为看懂思想再来一百个不对齐的你也能迎刃而解。
进入真正的魔法世界，针对此案例给出两个思路大家自行选择
inline-block 魔法
