内容随文字向下移动

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;
}

当center元素没有任何内容时，结果如下： 但是当我将一些文本放入第二个元素时，结果如下：

为什么中间元素向下移动文本？我怎么能解决这个问题？

Answer 1

使用display时：inline-block：别忘了把vertical-align：middle;文本，并保持行高（行高）与相同的时间，以确保您有垂直对齐