Содержимое перемещается вниз с текстом

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

При использовании дисплея: встроенный блок: не забудьте поставить вертикально-выровненный: средний; тексты и поддерживать высоту строки (высоту линии) с таким же количеством времени, чтобы обеспечить вертикальное выравнивание.