內容向下移動文本

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;文本並保持行高度（行高）的時間相同，以確保您有垂直對齊方式