针对bootstrap内联单选框input与文字不能居中对齐的解决办法

时间:2023-03-09 06:29:43
针对bootstrap内联单选框input与文字不能居中对齐的解决办法

1.html代码

<div >
<label class="checkbox-inline first-label">
<input type="radio" name="getOption" id="option1" value="option1" checked>张三
</label>
<label class="checkbox-inline">
<input type="radio" name="getOption" id="option2" value="option2"> 李四
</label>
<label class="checkbox-inline">
<input type="radio" name="getOption" id="option3" value="option3"> 王五
</label>
</div>

2.css代码

.checkbox-inline{
          padding:;
          margin:0 15px 0 0;
          line-height: 20px;
          min-height: 20px;
}
input[type='checkbox'], input[type='radio'] {
          margin: -2px 5px 0 0;
          line-height: 20px;
}

3.css内的只可根据需要相应调整,本文针对label行高20px举例。