我无法将我的复选框和单选按钮置于 td 的中心。理想情况下，我希望单选按钮位于标签的左侧，但它并没有按照我想要的方式工作。
这是一个 fiddle : http://jsfiddle.net/3s4pcu3w/
当前的 CSS:
#justification {
display: none;
}
#public-school-eligibility {
text-align: center;
position: static;
}
#public-school-eligibility input, select {
margin-top: 0px;
width: 55px;
margin: 5px;
}
#public-school-eligibility td {
vertical-align: text-top;
text-align: center;
}
html:
<div class='container'>
<div class='content'>
<div id='public-school-eligibility'>
<div class='span12'>
<table border='5'>
<thead class='te'>
<tr>
<th>School Name</th>
<th>School #</th>
<th>Grade Code</th>
<th>School Type</th>
<th>Neglected and Delinquent</th>
<th>New School</th>
<th>Reported 2014-2015 Number of Children </th>
<th>Reported 2014-2015 Number of Children</th>
<th>Reported 2014-2015 Percent of Children</th>
<th>2014-2015 Number of Children</th>
<th>2014-2015 Number of Children</th>
<th>2014-2015 Percent of Children</th>
<th>Selection Code*</th>
<th>Select for Split-Funding</th>
<th>Program Type</th>
<th>2014-2015 </th>
<th>2014-2015 </th>
<th>Community</th>
<th>Parental </th>
</tr>
</thead>
<form action="/school_eligibility_data" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="BRbQ4QP4N8DnudJDKiYmFGTboURhv+xr6rIGEl7YTXsnb44HK9NGT9WsHTo9yhAMEdQKa7qhirMB+ryZJSsvXA==" /> <tr class='school' data-id='2035' id='school_2035'>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td></td>
<input value="3" autosave="true" data-attribute="public_school_eligibility_survey_id" type="hidden" name="school_eligibility_data[public_school_eligibility_survey_id]" id="school_eligibility_data_public_school_eligibility_survey_id" />
<input value="2035" autosave="true" data-attribute="school_id" type="hidden" name="school_eligibility_data[school_id]" id="school_eligibility_data_school_id" />
<td>
<input id="children_attending_2035" autosave="true" data-percentage="true" data-attribute="children_attending" class="low-income-percentage" data-id="2035" type="number" value="318" name="school_eligibility_data[children_attending]" />
</td>
<td>
<input id="children_from_low_income_2035" autosave="true" data-percentage="true" data-attribute="children_from_low_income" class="low-income-percentage" data-id="2035" type="number" value="305" name="school_eligibility_data[children_from_low_income]" />
Use 1.6 Multiplier
<input type="checkbox" name="multiplier" id="test" value="1" />
</td>
<td>
<div class='percentage' id='percentage_2035'>
99
</div>
</td>
<td>
<div autosave class='selection_code' data-attribute='selection_code' data-id='2035' id='select_2035'>
<select name="school_eligibility_data[selection_code]" id="school_eligibility_data_selection_code"><option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option selected="selected" value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option></select>
</div>
</td>
<td>
<div class='center'>
<input name="school_eligibility_data[split_funding]" type="hidden" value="false" /><input id="split_funding_2035" data-attribute="split_funding" type="checkbox" value="true" checked="checked" name="school_eligibility_data[split_funding]" />
</div>
</td>
<td>
<label for="program_type_SW">Sw</label>
<input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="SW" id="school_eligibility_data_program_type_sw" />
<br>
<label for="program_type_TA">Ta</label>
<input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="TA" id="school_eligibility_data_program_type_ta" />
<br>
<label for="program_type_N/A">N/a</label>
<input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="N/A" id="school_eligibility_data_program_type_na" />
</td>
<td>
<input id="per_pupil_allocation_2035" autosave="true" data-attribute="per_pupil_allocation" type="number" value="33" name="school_eligibility_data[per_pupil_allocation]" />
</td>
<td></td>
<td>
<input id="community_eligibility_provision_2035" autosave="true" data-attribute="community_eligibility_provision" type="number" value="333" name="school_eligibility_data[community_eligibility_provision]" />
</td>
<td>
<input id="parental_involvement_reservations_2035" autosave="true" data-attribute="parental_involvement_reservations" type="number" value="33" name="school_eligibility_data[parental_involvement_reservations]" />
</td>
<tr>
<td class='justification' colspan='12' data-id='2035' id='justification_2035'>
* You have selected one of the following Selection Codes: E, F, H, K, or L. Provide a justification below.
<textarea autosave="true" data-attribute="justification" name="school_eligibility_data[justification]" id="school_eligibility_data_justification">
</textarea>
</td>
</tr>
</tr>
最佳答案
从 #public-school-eligibility 输入中删除此 width:55px，选择 并将其放入您的 css 代码中
#public-school-eligibility td p{
display:inline;
}
我使用了 p 标签，但您也可以使用 label 代替。
这是 jsfiddle http://jsfiddle.net/3s4pcu3w/5/
关于html - 我无法将 <td> 中的复选框和单选按钮居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29037408/