多行文字不垂直居中

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; 
} 

希望它能幫助你！