设置单个单元格中单选按钮的位置

Question

我的广播按钮对齐有问题。我想自由设置广播按钮的位置，但是有了我现在无法正确设置的代码。

它从顶部停留在中间，我只能更改margin-left。谁能帮我吗？

您可以在这里找到我的代码：https：//jsfiddle.net/3vl8lgo9/

.divTable {
  display: table;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

<table class="divTable" border="1" cellspace="0" cellpadding="0" style="width:1134px; height:756px;">
  <tbody class="divTableBody">
    <tr class="divTableRow">
      <td class="divTableCell" style="width:900px; height:194px;" colspan="4"></td>
      <td class="divTableCell" style="width:234px; height:194px;"></td>
    </tr>
    <tr class="divTableRow">
      <td colspan="5" style="width:1134px; height:185px;"></td>
    </tr>
    <tr class="divTableRow" style="padding-top:100px;">
      <td class="divTableCell" rowspan="2" style="width:140px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;">
        <input type="radio" name="gender" value="male">
      </td>
      <td class="divTableCell" rowspan="2" style="width:251px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCell" rowspan="2" style="width:673px; height:293px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCell" style="width:1000px; height:84px;" colspan="4"></td>
      <td class="divTableCell" style="width:134px; height:84px;"></td>
    </tr>
  </tbody>
</table>

Answer 1

您想要它在中间;

.divTableRow {
  display: table-row;
  text-align:center;
}

还是我误解了你？

Answer 2

将.divTableCellRadioButton设置为position:relative。现在，将输入设置为position:absolute并定义top，left，bottom，right位置。下面的示例显示了从容器顶部的广播按钮20px。

.divTable {
  display: table;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}
.divTableCellRadioButton {
  position:relative;
}
.divTableCellRadioButton input {
  position:absolute;
  top:20px;
}

<table class="divTable" border="1" cellspace="0" cellpadding="0" style="width:1134px; height:756px;">
  <tbody class="divTableBody">
    <tr class="divTableRow">
      <td class="divTableCell" style="width:900px; height:194px;" colspan="4"></td>
      <td class="divTableCell" style="width:234px; height:194px;"></td>
    </tr>
    <tr class="divTableRow">
      <td colspan="5" style="width:1134px; height:185px;"></td>
    </tr>
    <tr class="divTableRow" style="padding-top:100px;">
      <td class="divTableCell" rowspan="2" style="width:140px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;">
        <input type="radio" name="gender" value="male">
      </td>
      <td class="divTableCell" rowspan="2" style="width:251px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCell" rowspan="2" style="width:673px; height:293px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCell" style="width:1000px; height:84px;" colspan="4"></td>
      <td class="divTableCell" style="width:134px; height:84px;"></td>
    </tr>
  </tbody>
</table>