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

希望它会对你有所帮助！

多行文本不垂直居中

2 个答案: