Html 纯CSS单选按钮，带标签单选标签（第一个标签是图标），可点击

我想实现具有以下结构的单选按钮：

           A             B
      () LabelA      () LabelB

当您在文本（A）、收音机（）或标签（因为它们都属于同一个实体）中单击时，收音机圆圈应被激活。我想要T1，水平居中，圆圈和标签A

我发现不可能做到的是，按照我的要求正确对齐元素：

我附上了一把小提琴，上面有已经完成的结构和基本造型/动画：

有什么想法吗？：）

---

非常感谢您的帮助，

好吧，我想这种方法：

CSS:

HTML:

阿拉贝尔A 布拉贝尔B 你只需要为div选择一个合适的宽度

希望能有所帮助。

。事务图标{
显示：块；
位置：相对位置；
字体大小：25px；
}
博士无线电{
位置：相对位置；
显示：内联块；
文本对齐：居中；
}
.md收音机+.md收音机{
左边距：30px；
}
.超级盒子{
显示：内联块；
位置：相对位置；
}
拉伯菲尔德先生{
显示：内联块；
位置：相对位置；
垂直对齐：中间对齐；
}
.盒子{
显示：内联块；
位置：相对位置；
垂直对齐：中间对齐；
}
.无线电标签{
显示：内联块；
位置：相对位置；
}
标签{
字体大小：13px；
颜色：#888888；
不透明度：1；
过滤器：α（不透明度=100）；
光标：指针；
宽度：30px；
高度：30px；
}
.md无线电列表{
利润率：20px0；
}
.md收音机列表.md收音机{
显示：内联块；
边缘底部：10px；
}
.radioText{}.checkcontainer{
位置：相对位置；
显示：内联；
}
.检查{
顶部：7px；
左：7px；
宽度：10px；
高度：10px；
背景：#44b4e3；
不透明度：0；
z指数：6；
边界半径：50%；
-moz边界半径：50%；
-webkit边界半径：50%；
-webkit变换：缩放（0）；
-moz变换：比例（0）；
变换：比例（0）；
位置：绝对位置；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
过渡时间：0.3s；
}
.盒子{
顶部：0px；
边框：2px实心#44b4e3；
高度：20px；
宽度：20px；
边界半径：50%；
-moz边界半径：50%；
-webkit边界半径：50%；
z指数：5；
}
.md无线电输入[类型=无线电]{
可见性：隐藏；
位置：绝对位置；
}
.md无线电输入[类型=无线电]：选中~label>.superBox.thebox.check{
不透明度：1；
-webkit转换：规模（1）；
-moz变换：比例（1）；
变换：比例（1）；
}
.md无线电输入[类型=无线电]：禁用~标签，
.md无线电输入[类型=无线电][已禁用]~标签{
光标：不允许；
不透明度：0.7；
过滤器：α（不透明度=70）；
}
.md无线电输入[类型=无线电]：禁用~label>.superBox.thebox.box，
.md收音机输入[type=radio][disabled]~label>.superBox.thebox.box{
光标：不允许；
不透明度：0.7；
过滤器：α（不透明度=70）；
}
.md无线电输入[类型=无线电]：禁用：选中~label>.superBox.thebox.check，
.md无线电输入[类型=无线电][禁用]：选中~label>.superBox.thebox.check{
光标：不允许；
不透明度：0.7；
过滤器：α（不透明度=70）；
}

A.
选择1
B
选择2

是的，就是这样：）谢谢！

div.option span {
    display: block;
    text-align: center;
}
div.option {
    float: left;
    width: 150px;
    text-align: center;
}

<div class="option"><label><span>A</span><input type="radio" name="r1"></input>Label A</label></div>
<div class="option"><label><span>B</span><input type="radio" name="r1"></input>Label B</label></div>