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

This question already has answers here:

Vertical-align aligns everything else except self
                                
                                    （2个答案）
                                
                        
                        
                            I do not “get” the vertical-align css property
                                
                                    （2个答案）
                                
                        
                        
                            inline-box with image vertical-align:middle with parent box
                                
                                    （1个答案）
                                
                        
                                在8个月前关闭。
            
                    
我在div中有一个inline-block元素，需要在中间垂直对齐。但是，该属性无法按预期工作，并且总是会有些下推。这个小提琴演示了问题https://jsfiddle.net/e4spxubf/

我尝试将两个子父元素的高度和line-height设置为相同的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>

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

最佳答案

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

关于css - vertical-align:内联块上的中间未按预期工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56502951/