Multi line text does not vertically center

Question

I have 5 custom radio buttons, which uses the LABEL tag to show the custom button, and hides the original.

The problem is that the text needs to be vertically aligned, and also the multi line text needs to be vertically aligned. When I remove the line height property, the text goes back to the top. and ignores the "Align Vertically".

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

Add the following rules to your label class:

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

FIDDLE

Answer 2

Replace following classes with this(modification to your website as per given link):

You need to remove width for each span under .ratings and let it to be auto as per content.

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

Comment out line-height: normal; and let it also inherited from parent.

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

Hope it would helps you!