都在同一行为啥对不齐？（vertial-align）

今天遇到一个问题，模拟list-type的div实心方块和标题对不齐…（放大n倍看效果！！哈哈）

我朋友教我，在“需要”前面加个x试试
然后…

我发现了，x和div能对齐，但中文却不行。
是因为对准基线的问题，vertial-align的默认值，是底部基线对齐，但中文的基线不在底部，所以出现误差。

设置vertical-align: middle;
统一基线后，再来看效果

okkkk！完工！

vertical-align图示如下：