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;文本并保持行高 (line-height) 具有相同的时间量以确保您具有垂直对齐