vertical-align：内联块上的中间未按预期工作

Question

我在div中有一个inline-block元素，需要在中间垂直对齐。但是，该属性无法按预期工作，并且总是会被向下推。这个小提琴演示了问题https://jsfiddle.net/e4spxubf/

我尝试将两个子父元素的高度和线高设置为相同的14px。

<div style="
    height: 14px;
    line-height: 14px;
    background-color: red;
"><span icon="eye-open" style="
    vertical-align: middle;
    background-color: aquamarine;
    height: 14px;
    width:14px;
    display: inline-block;
"></span></div>

我希望蓝色框在父级中完全垂直居中。

Answer 1

div使自身与范围的基线对齐。设置vertical-align: baseline后，您会发现跨度现在也与基线对齐。