【Vue项目练习】文本不在同一水平线？(非强迫症误入！）

问题（非强迫症误入！）

今天做项目时，在我最喜欢的静态组件ctrl+C ctrl+V环节时，或许是因为强迫症，我看到这左右两行文字间小到不能再小的差异，看着有个1~3px的偏差

受不了！为什么左右两行文字不在同一水平线上？！！！！

排查

OKOK~

我反手直接打开.vue文件查看<template>和<style>的这两个地方。

细看，<div class="sumprice">和<div class="chosed">，好像只有<i class="summoney">不同

好咯...

那这个看起来只有小几px的偏差到底是哪里来的?打开浏览器检查元素，好像没毛病呀，两个盒子都完美贴合上下线，那到底是哪里出了问题呢

按道理来说，一个盒子里的height属性值和文字的line-height一样高，那么文字是会在盒子竖直居中的。利用浏览器动态调试，这个height怎么调，chosed盒子是一个屹立不倒，不过我好像发现了点什么！

聪明如你我，没错，我这回试了试调节刚才我们一直没有重视的差异：

<i class="summoney">

我发现他的font-size是16px，而其他的地方都是默认为12px，将他动态调回12px

芜湖！终于让两行文字水平了！

那么出现这个偏差的原因显而易见：“总价”后的这个为了凸显的数字"0"的字体比同盒子里面的其他字体大，而因为处于同一行的缘故，会使得他们的底部对齐，视觉上这个“总价”就往下走了小几px，真的好细节啊~

解决

业务上这个16px肯定是要保留的，那有没有什么方法不让这个右侧数字影响左侧文字呢

最简单的就是给他加个属性vertical-align:bottom，目的就是让文本底部对齐

忘记了也没事，套个绝对定位，使其自己上沿top固定在父祖件顶端

问题就解决啦，强迫症又舒服了