Css 将单选按钮圆圈与容器顶部对齐

我在一个使用材质（v11）的角度（v11）项目中工作。
我在一个页面上工作，用户可以从几个选项中选择一个。这些选项将显示为带有信息行的mat卡。我希望它看起来（简单地说）像这样：

我正在使用单选按钮组来执行此操作（）

我有一个造型问题。我希望单选按钮的圆圈与卡片的顶部对齐，就像上面显示的图片。但是，默认情况下，圆圈在整个容器的中间浮动，所以看起来是这样的：

现在，我可以在单选按钮圈中添加一个类，该类顶部有一个负边距，因此它将被向上推，与mat卡的顶部对齐。但我的问题是mar卡的高度可能不同

，它显示带有负边距顶部的选项，但其中一张垫子卡更大，因此它的圆圈与顶部不对齐

有没有更好的方法使收音机圆圈与卡的顶部对齐？

---

或者只是一种更好的方式来获得我想要的总体设计？

由于

mat单选标签，mat单选按钮与中心对齐。因此，要根据您的要求进行修复，请删除对
mat radio container
所做的css更改，并将其添加到css/scss中：

::ng-deep .mat-radio-label {
  align-items: inherit!important;
}

我已经编辑了你的，它正在工作。请核实