Reactjs 标签垂直对齐的单选按钮

我试图建立一个单选按钮，在这方面，我不能正确地使垂直对齐的标签，我想这是因为我错过了一些绝对和相对的部分，尝试垂直对齐也，但没有工作

使用flex有更好的方法吗

---

如果我使用flex，我无法正确分配输入中的小圆。

我假设您试图将标签定位在单选按钮的右侧

看起来您正在尝试使用flexbox，所以我将使用它来回答

首先，您应该在

RadioButton

中的单选按钮后放置标签：

return (
  <Label htmlFor={id} disabled={disabled}>
    <Input
      id={id}
      type="radio"
      role="radio"
      name={name}
      value={value}
      disabled={disabled}
      onChange={onChange}
      checked={checked}
    />
    <Indicator />
    {label} // <----
  </Label>
);

最后，您需要将

指示器设置为相对位置：

const Indicator = styled.div`
  border: 1px solid;
  border-radius: 1em;
  width: 0.75em;
  height: 0.75em;
  position: relative; // <---

  ${Label}:hover & {
    background: #ccc;
  }

const Indicator=styled.div`
边框：1px实心；
边界半径：1米；
宽度：0.75em；
高度：0.75em；
位置：相对；//你想把标签放在单选圆圈的右边吗？这对我来说很有效，谢谢你的解释和一步一步的方法，只是一个疑问，因为字体大小是24px，它将需要标签和单选按钮来增加大小。我如何减少标签文本的大小，基本上是文本和单选按钮的两个大小
const Indicator = styled.div`
  border: 1px solid;
  border-radius: 1em;
  width: 0.75em;
  height: 0.75em;
  position: relative; // <---

  ${Label}:hover & {
    background: #ccc;
  }