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

Question

我正在尝试构建一个单选按钮，在这个code 中，我无法正确地使标签垂直对齐，我认为这是因为我在绝对和相对部分缺少一些东西，尝试垂直对齐也可以，但是没有用。

有没有更好的使用 flex 的方法？

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

Answer 1

我假设您正在尝试将标签放置在单选按钮的右侧。

看起来你正在尝试使用 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>
);

然后，您可以使用 flexbox for Label ：

const Label = styled.label`
  display: flex;       // <----
  align-items: center; // <----
  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
  font-size: 24px;
`;

最后，您需要使Indicator 位置相对：

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

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