使用自定义单选按钮将标签垂直对齐

Question

外观：

enter image description here

我希望标签具有动态尺寸，例如“非常不舒服”的更改

    Very
  Strongly
uncofortable
  [input]

在CSS方面，我真的没有经验

<div class="w-50 d-flex justify-content-between answer-box">
    <div *ngFor="let label of labels; index as id" class="text-center question-label">
        <span class="mr-2">{{label}}</span>
        <div class="radio">
            <label style="font-size: 2.5em">
                <input type="radio" [value]="id+1" formControlName="value">
                <span class="cr"><i class="cr-icon fa fa-check"></i></span>
            </label>
        </div>
    </div>
</div>

当我设法以某种方式拆分文本时，如果没有标签，则复选框处于不同的高度。

Answer 1

尝试这样的事情：

html：

<table class="cBox">
  <tr>
    <td width="10px" >Very Strongly uncofortable</td>
    <td width="20px">Uncertain </td>
    <td width="20px">No Answer </td>
  </tr>
  <tr>
    <td><input type="checkbox"/> </td>
    <td><input type="checkbox" /> </td>
    <td><input type="checkbox"/> </td>
  </tr>
</table>

CSS：

.cBox {
  text-align: center;
  padding: 5px;
}