javascript - 标签下方的中心单选按钮？

Question

我正在尝试将 Radio Button 置于其 Label Text 下方的中心。这有点类似于 this question .但不同之处在于我的单选按钮及其标签是在运行时从 C# 呈现的。所以它被呈现为，

<tr>
 <td>
<input type="radio" name="radio" id="my_radio_button_id" />
<label for="my_radio_button_id">My Label</label>
 </td>
</tr>
<tr>
 ...    
</tr>

所以 RadioButton 首先呈现，然后是 Label 这就是为什么我不能使用给定的答案来解决这个问题。所以尝试了很多 CSS 但无法提出任何适用的 CSS。

所以，据我所知，我可以使用 2 种方式实现这一点

1. 使用 jquery 操作呈现的 Html。
2. 重写RenderContents 方法以根据需要呈现数据。

但我想知道是否有任何方法可以仅使用 CSS(或少量使用 jquery/javascript)来做到这一点。所以我不必通过上述方法之一。

如有混淆，请随时发表评论。

Answer 1

Flexbox 可以做到这一点:

flex 盒 Suppport是 IE10 及更高版本

td {
  display: flex;
  border: 1px solid grey;
  padding: .25em;
  flex-direction: column-reverse;
  align-items: center;
}

<table>
  <tr>
    <td>
      <input type="radio" name="radio" id="my_radio_button_id" />
      <label for="my_radio_button_id">My Label</label>
    </td>
  </tr>
  <tr>
</table>