Table 中的水平居中单选按钮

Question

我没有发生什么事，但这是我的 HTML;

<tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'>
  <td class="answer_cell_003 answer-item radio-item">
  <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
</tr>

我正在尝试将单选按钮居中对齐，但只是停留在左侧。到目前为止，我已经尝试过类似的东西；

table td .radio { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}
table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}

它将确认 border 属性。并显示红色边框，所以我知道它被正确引用了。

我做错了什么？

更新；更多代码

table td .radio { border:1px solid red;display: block;margin:0 auto;}
    table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}

 <table class="question subquestions-list questions-list " summary="An array with sub-question on each line. The answers are contained in the table header. ">
  <colgroup class="col-responses">
  <col class="col-answers" width="50%%" />
 <col class="odd" width="10%" />
 <col class="even" width="10%" />
 <col class="odd" width="10%" />
 <col class="even" width="10%" />
 <col class="odd" width="10%" />
  </colgroup>
  <thead><tr class="dontread">
  <td>&nbsp;</td>
  <th>Strongly agree</th>
  <th>Agree</th>
  <th>Neither agree nor disagree</th>
  <th>Disagree</th>
  <th>Strongly disagree</th>
 </tr></thead>
  
 <tbody>
 
  <tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'>
  <th class="answertext">
 a. One.<input type="hidden" name="java158311X2059X38315A008" id="java158311X2059X38315A008" value="" />
  </th>
    <td class="answer_cell_001 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A008-1">Strongly agree</label>
  <input class="radio" type="radio" name="158311X2059X38315A008" value="1" id="answer158311X2059X38315A008-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_002 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A008-2">Agree</label>
  <input class="radio" type="radio" name="158311X2059X38315A008" value="2" id="answer158311X2059X38315A008-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_003 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_004 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A008-4">Disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A008" value="4" id="answer158311X2059X38315A008-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_005 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A008-5">Strongly disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A008" value="5" id="answer158311X2059X38315A008-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
 </tr>
 
 
  <tr id='javatbd158311X2059X38315A603' class='array1 answers-list radio-list'>
  <th class="answertext">
 b. Two.<input type="hidden" name="java158311X2059X38315A603" id="java158311X2059X38315A603" value="" />
  </th>
    <td class="answer_cell_001 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A603-1">Strongly agree</label>
  <input class="radio" type="radio" name="158311X2059X38315A603" value="1" id="answer158311X2059X38315A603-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_002 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A603-2">Agree</label>
  <input class="radio" type="radio" name="158311X2059X38315A603" value="2" id="answer158311X2059X38315A603-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_003 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A603-3">Neither agree nor disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A603" value="3" id="answer158311X2059X38315A603-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_004 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A603-4">Disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A603" value="4" id="answer158311X2059X38315A603-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
    <td class="answer_cell_005 answer-item radio-item">
 <label class="hide read" for="answer158311X2059X38315A603-5">Strongly disagree</label>
  <input class="radio" type="radio" name="158311X2059X38315A603" value="5" id="answer158311X2059X38315A603-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
 </tr>
 </tbody>
 </table>

Answer 1

将单选按钮设为块元素。

display:block

table td .radio { border:1px solid red;display: block;margin:0 auto;}
table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}

<table>
 <tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'>
  <td class="answer_cell_003 answer-item radio-item">
  <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label>
  
  <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" />
  </td>
  </tr>
</table>

Answer 2

给出输入显示块

u can find the code here
 [https://jsfiddle.net/u85mca3d/][1]

Table 中的水平居中单选按钮

Horizontal Center Radio Button in Table

html

css

alignment