解决html元素里写入文字之后布局发生改变的问题

不加入文字之前，如图：

效果：

到这里一切安好，未出现问题，可是往.item中加文字就变成了这样：

效果：

哎！它布局变了！被挤到下边了，你说气不气，这个问题会出现在任何html标签身上，我就添加个文字，布局给我改了！

问题出现在元素内的文字默认对齐方式是基线对齐，不了解基线的哥们现在去百度一下，只要给两个小盒子加一个属性即可：vertical-align: middle;

意思是使文字中线对齐

效果：