vertical-align 是一个容易出bug的属性
首先,为什么有时候始终达不到对齐的效果呢
来看看官方定义
对不齐的原因主要是因为,父元素 如图,可能的值中,有不少是以父元素作为基准对其的,而不是与其同辈的元素,但是如果同辈元素中均有这一属性 则两者能够水平和对齐,因为他们的基准一致。<p><img/>balabala</p>
在这段代码里,在img上加vertical-align希望i与文字居中对齐(或者别的)是会出问题的,因为文字不会居中对齐。(某些特定条件下是会对齐的)
MDN上对vertical-align的讲解