Html 在自定义单选按钮上对齐项目中心

演示

我做了一个自定义单选按钮，但是DOM结构使得自定义复选框很难居中对齐，我需要有不同行的标签在右边，复选框水平居中

<div>
  <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
  <label for="radio-1" class="radio-custom-label"><p>Row one</p><p>Row two</p> </label>
</div>

第一行
第二行

只需在div中使用flebox即可

div{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
p{margin:0；}

第一行
第二行

只需在div中使用flebox即可

div{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
p{margin:0；}

第一行
第二行

删除

元素，然后只需向其添加

 <label for="radio-1" class="radio-custom-label"><p>Row one</p><p>Row 
   two</p> </label>

检查此代码段

/*仅演示样式*/
身体{
字体系列：雷威；
}
/*仅限结束演示样式*/
.checkbox自定义，.radio自定义{
不透明度：0；
位置：绝对位置；
}
.checkbox自定义、.checkbox自定义标签、.radio自定义、.radio自定义标签{
显示：内联块；
垂直对齐：中间对齐；
保证金：5px；
光标：指针；
}
.复选框自定义标签，.收音机自定义标签{
位置：相对位置；
}
.checkbox自定义+.checkbox自定义标签：之前，.radio自定义+.radio自定义标签：之前{
内容：''；
背景：#fff；
边框：2px实心#ddd；
显示：内联块；
垂直对齐：中间对齐；
宽度：20px；
高度：20px；
填充：2px；
右边距：10px；
文本对齐：居中；
浮动：左；
}
.复选框自定义：选中+.复选框自定义标签：之前{
背景：丽贝卡紫；
盒影：插入0px 0px 0px 4px#fff；
浮动：左；
}
.收音机自定义+.收音机自定义标签：之前{
边界半径：50%；
}
.收音机自定义：选中+.收音机自定义标签：之前{
背景：#ccc；
盒影：插入0px 0px 0px 4px#fff；
浮动：左；
}
.checkbox自定义：焦点+.checkbox自定义标签，.radio自定义：焦点+.radio自定义标签{
轮廓：1px实心#ddd；/*聚焦样式*/
}

第一行
第二行

删除

元素，然后只需向其添加

 <label for="radio-1" class="radio-custom-label"><p>Row one</p><p>Row 
   two</p> </label>

检查此代码段

/*仅演示样式*/
身体{
字体系列：雷威；
}
/*仅限结束演示样式*/
.checkbox自定义，.radio自定义{
不透明度：0；
位置：绝对位置；
}
.checkbox自定义、.checkbox自定义标签、.radio自定义、.radio自定义标签{
显示：内联块；
垂直对齐：中间对齐；
保证金：5px；
光标：指针；
}
.复选框自定义标签，.收音机自定义标签{
位置：相对位置；
}
.checkbox自定义+.checkbox自定义标签：之前，.radio自定义+.radio自定义标签：之前{
内容：''；
背景：#fff；
边框：2px实心#ddd；
显示：内联块；
垂直对齐：中间对齐；
宽度：20px；
高度：20px；
填充：2px；
右边距：10px；
文本对齐：居中；
浮动：左；
}
.复选框自定义：选中+.复选框自定义标签：之前{
背景：丽贝卡紫；
盒影：插入0px 0px 0px 4px#fff；
浮动：左；
}
.收音机自定义+.收音机自定义标签：之前{
边界半径：50%；
}
.收音机自定义：选中+.收音机自定义标签：之前{
背景：#ccc；
盒影：插入0px 0px 0px 4px#fff；
浮动：左；
}
.checkbox自定义：焦点+.checkbox自定义标签，.radio自定义：焦点+.radio自定义标签{
轮廓：1px实心#ddd；/*聚焦样式*/
}

第一行
第二行

使用CSS网格，您可以轻松做到这一点

将网格声明为2行乘2列（将第一行设置为最小内容），将项目居中对齐，并使：before元素跨越2行

/*仅演示样式*/
身体{
字体系列：雷威；
}
.包裹{
/*防止占用100%的宽度*/
显示：内联块；
}
/*仅限结束演示样式*/
.checkbox自定义，.radio自定义{
不透明度：0；
位置：绝对位置；
}
.checkbox自定义、.checkbox自定义标签、.radio自定义、.radio自定义标签{
显示：网格；
对齐项目：居中；
网格模板列：最小内容1fr；
网格模板行：1fr 1fr；
保证金：5px；
光标：指针；
}
.复选框自定义标签p、.收音机自定义标签p{
保证金：0；
}
.checkbox自定义+.checkbox自定义标签：之前，.radio自定义+.radio自定义标签：之前{
内容：''；
/*告诉按钮占用两行*/
网格行：1/3；
背景：#fff；
边框：2px实心#ddd；
宽度：20px；
高度：20px；
填充：2px；
右边距：10px；
文本对齐：居中；
}
.复选框自定义：选中+.复选框自定义标签：之前{
背景：丽贝卡紫；
盒影：插入0px 0px 0px 4px#fff；
}
.收音机自定义+.收音机自定义标签：之前{
边界半径：50%；
}
.收音机自定义：选中+.收音机自定义标签：之前{
背景：#ccc；
盒影：插入0px 0px 0px 4px#fff；
}
.checkbox自定义：焦点+.checkbox自定义标签，.radio自定义：焦点+.radio自定义标签{
轮廓：1px实心#ddd；/*聚焦样式*/
}

第一行
第二行

使用CSS网格，您可以轻松做到这一点

将网格声明为2行乘2列（将第一行设置为最小内容），将项目居中对齐，并使：before元素跨越2行

/*仅演示样式*/
身体{
字体系列：雷威；
}
.包裹{
/*防止占用100%的宽度*/
显示：内联块；
}
/*仅限结束演示样式*/
.checkbox自定义，.radio自定义{
不透明度：0；
位置：绝对位置；
}
.checkbox自定义、.checkbox自定义标签、.radio自定义、.radio自定义标签{
显示：网格；
对齐项目：居中；
网格模板列：最小内容1fr；
网格模板行：1fr 1fr；
保证金：5px；
光标：指针；
}
.复选框自定义标签p、.收音机自定义标签p{
保证金：0；
}
.checkbox自定义+.checkbox自定义标签：在.radio cust之前
.radio-custom:checked + .radio-custom-label:before {
    background: #ccc;
    box-shadow: inset 0px 0px 0px 4px #fff;
      float: left;
}