我有一个简单的bootstrap 3表，有4列：问题，通过，失败，N / A.复选框需要水平和垂直居中。我已经尝试将div和span等包裹在它们周围，但我仍在苦苦挣扎。
/* CSS used here will be applied after bootstrap.css */
.badge-success {
background-color: #468847;
}
.badge-info {
background-color: #3a87ad;
}
.badge-danger {
background-color: #b94a48;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<div style="padding-right: 20px; padding-left: 20px; padding-top: 20px;">
<form role="form">
<div class="row">
<table style="width:100%;font-size: 11px;" class="table-striped">
<tbody><tr>
<td style="width: 64%"><h4>Questions</h4></td>
<td style="width: 12%; font-size: 14px;"><span class="badge badge-success">Pass</span></td>
<td style="width: 12%; font-size: 14px;"><span class="badge badge-danger">Fail</span></td>
<td style="width: 12%; font-size: 14px;"><span class="badge badge-info">N/A</span></td>
</tr>
<tr>
<td style="width: 64%">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.??</td>
<td style="width: 12%"><div class="checkbox checkbox-success"><input class="styled styled-primary" name="chkQ3" value="option1" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-danger"><input class="styled styled-danger" name="chkQ3" id="chkQ3" value="option2" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-primary"><input class="styled styled-default" name="chkQ3" value="option3" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
</tr>
<tr>
<td style="width: 64%">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful</td>
<td style="width: 12%"><div class="checkbox checkbox-success"><input class="styled styled-primary" name="chkQ4" value="option1" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-danger"><input class="styled styled-danger" name="chkQ4" value="option2" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-primary"><input class="styled styled-default" name="chkQ4" value="option3" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
</tr>
<tr>
<td style="width: 64%">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus</td>
<td style="width: 12%"><div class="checkbox checkbox-success"><input class="styled styled-primary" name="chkQ5" value="option1" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-danger"><input class="styled styled-danger" name="chkQ5" value="option2" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-primary"><input class="styled styled-default" name="chkQ5" value="option3" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
</tr>
<tr>
<td style="width: 64%">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</td>
<td style="width: 12%"><div class="checkbox checkbox-success"><input class="styled styled-primary" name="chkQ6" value="option1" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-danger"><input class="styled styled-danger" name="chkQ6" value="option2" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
<td style="width: 12%"><div class="checkbox checkbox-primary"><input class="styled styled-default" name="chkQ6" value="option3" aria-label="Single checkbox One" type="checkbox"><label></label></div></td>
</tr>
</tbody></table>
</div>
</form>
</div>
这是我在bootply中的例子：
答案 0 :(得分：2)
更新Here
您必须指定td text-align:center;并使用.check和.radio div来垂直对齐输入
.table-striped td {
text-align: center;
}
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
margin: 0;
}
.checkbox,
.radio {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
display: table;
width: 100%;
}
.checkbox input,
.radio input {
vertical-align: middle;
height: 100%;
}
答案 1 :(得分：0)
在我添加的示例中，它适用于我
.styled {
display: block;
margin: 0 auto;
width: 100%
}
答案 2 :(得分：0)
尝试更改此类的复选框类样式。在这里，我向您的班级添加了padding-left:35px。
.checkbox,
.radio {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 35px;
}