Как выровнять два пролета вместе?

Question

У меня проблемы с совмещением двух пролетов. Второй прогон начинается немного ниже первого, что вызывает неправильное выравнивание пролетов.

По существу, я пытаюсь выровнять .cbtnSymbol и .cbtnLabel вместе, чтобы они начинались с одинаковой высоты.

Вот TestCase: http://jsfiddle.net/DwGEa/

Answer 1

Здесь вы идете: http://jsfiddle.net/DwGEa/19/

Просто добавьте line-height: 30px; vertical-align:middle; в .cbtnLabel

Answer 2

Попробуйте floatspan -s - http://jsfiddle.net/DwGEa/4/

Answer 3

Добавление линии высоты и вертикального выравнивания, кажется, помогает, но я не уверен на 100%, что окончательный результат вы после.

<div class="cmenu"> 
     <div class="cbtn add"><span class="cbtnSymbol">+</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Add</span></div> 
     <div class="cbtn add"><span class="cbtnSymbol">-</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Delete</span></div> 
</div> 

Вот модифицированный jsFiddle: http://jsfiddle.net/DwGEa/11/

Answer 4

Добавить последние четыре свойства CSS в дополнение к вашей метке кода CSS

.cbtnLabel { 
    padding: 0 0 0 10px; 
    font-size: 8px; 
    height: 30px; 
    display: inline-block; 
    display: -moz-inline-stack; 
    vertical-align:top; 
    zoom: 1; 
    *display: inline; 
}​ 

Answer 5

Я не уверен, как вы будете себя чувствовать по этому поводу, но похоже, что у вас уже есть настройка divs как таблица. Итак, как насчет того, чтобы попробовать что-то вроде этого:

<table class="cmenu"> 
    <tr class="cbtn add"> 
     <td class="cbtnSymbol">+</td> 
     <td class="cbtnLabel">Add</td> 
    </tr> 
    <tr class="cbtn add"> 
     <td class="cbtnSymbol">-</td> 
     <td class="cbtnLabel">Delete</td> 
    </tr>   
</table> 

Делая это, вы можете избавиться от некоторого CSS для простоты. (Пример: вам не нужно будет дисплей: встроенный блок в малейшей)

DEMOhttp://jsfiddle.net/DwGEa/37/