用align-self: baseline 来解决✘和文字对不齐的问题

经常在做弹出窗的时候，遇到这样的需求：

如图，一排上有两个元素，一个是文字提示，一个是个X表示取消。

通常，会用flex--row来完成布局，X作为简单的一个元素，可以用+然后transform:rotateZ(45deg)来模拟，不用专门切图标。

此时，如果+的大小与字的大小是一样的，那对子元素用align-self:center还能达到对齐的效果，但这样往往会变得太小了。而放大之后，+会往下出来一点，因为高度超过了字的高度。试过调整line-height，但也没有效果。要不就要用margin-top以em为单位进行微调，但这样一来，就增加了复杂程度，失去了flex布局的意义。

如上图，此时，文字大小是1.125rem，而叉号（就是“+”）是1.5rem，明显靠下了。（为了方便看效果，把元素排在一起。）

这里是一个比较简单的方法：

不用转+号，直接在Graphemica( for people who love letters, numbers, punctuations &c) 中，找一个叉号的entity字符，然后align-self:baseline即可，baseline是根据文字基线对齐的，所以不会有这种问题。当然，用+来旋转也可以。

父元素：  

    

文字：

叉号：entity实体字符为×