html - 内容随文字向下移动

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; 文本并以相同的时间保持行高（行高）以确保垂直对齐