内容向下移动文本

Question

我有一个内联元素分为三部分：第一个元素只有背景图像。第二个是内容，第二个是仅有背景图片。 的HTML是

<span class="box-l"></span> 
<span class="box-c">some text</span> 
<span class="box-r"></span> 

和CSS：

.box-l{ 
    width: 7px; 
    height: 20px; 
    min-width: 10px; 
    background:url(../img/c_box.png) 0 0; 
    display: inline-block; 
    border: 0px; 
} 
.box-r{ 
    width: 5px; 
    height: 20px; 
    min-width: 5px; 
    background:url(../img/c_box.png) -42px 0; 
    display: inline-block; 
} 
.box-c{ 
    height: 20px; 
    min-width: 10px; 
    max-width: 40px; 
    display: inline-block; 
    font-size: 11px; 
    line-height: 20px; 
    background:url(../img/c_box.png) -9px 0; 
} 

当中心元素没有任何东西，结果如下： 但是当我把一些文本的第二个元素中，结果是这样的：

为什么中间元素向下移动文本里面？我如何解决这个问题？

Answer 1

当使用display：inline-block时：不要忘记把vertical-align：middle;文本并保持行高度（行高）的时间相同，以确保您有垂直对齐方式