Многострочный текст не вертикально расположен

Question

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

Проблема заключается в том, что текст должен быть выровнен по вертикали, а также текст с несколькими линиями должен быть выровнен по вертикали. Когда я удаляю свойство высоты строки, текст возвращается к началу. и игнорирует «Выровнять по вертикали».

JS FIDDLE: http://jsfiddle.net/KwQG7/1/

CSS:

.questions { 
    max-width:600px; 

} 

input[type=radio], input[type=checkbox] { 
    display: none; 
} 
input[type=radio]+ label, input[type=checkbox] + label { 
    padding-left: 35px; 
    padding-top: 4px; 
    height: 30px; 
    line-height:30px; 
    display: inline-block; 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    font-size: 12px; 
    vertical-align: middle; 
    cursor: pointer; 
    width:60px; 
    } 
input[type=radio]:checked + label, input[type=checkbox]:checked + label { 
    background-position: 0 -30px; 
} 
input[type=radio] + label, input[type=checkbox] + label { 
    padding-bottom:0px; 
    background-image: url(http://cis.kitoit.com/layouts/images/radio.png); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

HTML:

<div class="questions"> 
<span class="bx"> 
      <input type="radio" name="question1" id="radio1" value="radio" /> 
      <label class="black" for="radio1"><span>Unwilling</span> </label> 
</span> 

<span class="bx"> 
      <input type="radio" name="question1" id="radio2" value="radio" /> 
      <label class="black" for="radio2"><span>Not ready </span></label></span> 

<span class="bx"> 
      <input type="radio" name="question1" id="radio3" value="radio" /> 
      <label class="black" for="radio3"><span>Ready to a point</span></label> 
</span> 

<span class="bx"> 
      <input type="radio" name="question1" id="radio4" value="radio" /> 
      <label class="black" for="radio4"><span>Completely Ready</span> 
</label></span> 

<span class="bx"> 
      <input type="radio" name="question1" id="radio5" value="radio" /> 
      <label class="black" for="radio5"><span>Enthusiastic</span></label> 
</span> 
</div> 

Answer 1

Добавьте следующие правила к классу этикетки:

input[type=radio]+ label, input[type=checkbox] + label { 
    display: inline-flex; 
    align-items: center; /* vertical align */ 
    line-height: 14px; 
} 

FIDDLE

Answer 2

Заменить следующие классов с этим (модификации на ваш сайт, как на данной ссылке):

Вы должны удалить ширину для каждого диапазона под .ratings и пусть он будет автоматически в соответствии с содержанием.

.ratings > span { 
    display: table-cell; 
    /*width: 16%;*/ 
} 

Комментарий line-height: normal; и пусть он также унаследован от родителя.

label span { 
    display: inline-block; 
    /*line-height: normal;*/ 
    vertical-align: middle; 
} 

Надеюсь, это поможет вам!