Html 复选框未在div标记内部对齐

你好，不知怎么的，我的复选框和需要在旁边的文本不在同一行中对齐。我有JS Fiddle上的代码。

复选框代码为：

<div class="form-group">
 <div class="checkbox">
   <label>
     <input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
   </label>
 </div>
</div>

同意条款和条件

类formgroup和checkbox没有使用自定义css代码，这就是为什么我想知道它们是如何受到影响的

编辑：我在“另一个问题的副本”中添加了代码。它没有做任何事情。我仍然需要帮助。

将标签转换为a将为您提供垂直对齐

.checkbox标签{
显示器：flex；
对齐项目：居中；/*垂直对齐*/
}

同意条款和条件

更改了

的类。添加了复选框

vertical-align: middle;
width: 20px;

还补充说

input[type=checkbox] {
      width: 20px;
    }

@font-face{
字体系列：“brandon_reg”；
src:url（'../font/brandon grotesque light.otf'）；
}
@字体{
字体系列：“brandon_med”；
src:url（'../font/brandon grotesque medium.otf'）；
}
@字体{
字体系列：“brandon_black”；
src:url（'../font/brandon grotesque black.otf'）；
}
html{
字体大小：100%；
}
身体{
保证金：0自动；
显示：块；
/*寄存器背景*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
/*寄存器背景*/
}
.常规{
字体系列：“brandon_reg”；
}
博士{
字体系列：“brandon_med”；
}
.sml_填充{
保证金：-10；
填充：-10；
}
.厚实{
字体系列：“brandon_black”；
}
.厚膜bg2{
字体大小：35px；
}
@仅介质屏幕和（最大宽度：767px）{
.盒子{
高度：自动！重要；
}
}
法丹先生{
-webkit动画：动画显示0.8s；
动画：动画显示0.8秒；
可见性：可见！重要；
}
@-webkit关键帧动画演示{
0%{不透明度：0}
100%{不透明度：1}
}
.btn组sm>.btn、.btn sm{
浮动：无；
}
.导航栏切换{
显示：内联块；
浮动：无；
}
.全宽{
高度：自动；
宽度：100%；
}
.ul_登录{
颜色：#00a6a6；
}
.ul_注册{
颜色：#f08300；
}
.调整文本{
变换：translateT（-50）；
文本对齐：对齐；
填充：2%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*
.罗尤中心{
显示器：flex；
}
.row_中心>*{
弹性：1；
}
*/
.中央大厦{
左边距：自动；
右边距：自动；
显示：块；
}
.图标\文本\填充{
垫底：20px；
对齐项目：居中；
保证金：0自动；
}
.晶圆厂{
填充：20px；
字体大小：50px；
颜色：#FFF；
}
.fab:悬停{
颜色：#c9c9c9；
文字装饰：无；
}
/*标题的重要CSS*/
.导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：100px；
填充：10px 100px；
框大小：边框框；
过渡：.5s；
}
.列表1{
浮动：左；
字体大小：200%；
}
.列表2{
浮动：对；
字体大小：200%；
}
李娜：悬停{
颜色：#fff；
}
/*
.台词{
位置：相对位置；
填充：10px0；
}
.台词：之前{
内容：''；
显示：块；
左边距：自动；
右边距：自动；
边缘底部：10px；
排名：0；
左：0；
宽度：32%；
高度：1px；
背景：#cfcfcf；
}
.台词：之后{
内容：''；
显示：块；
左边距：自动；
右边距：自动；
边缘顶部：10px；
底部：0；
左：0；
宽度：32%；
高度：1px；
背景：#cfcfcf；
}
.台词(med):之前{
宽度：24%；
}
.台词(med):之后{
宽度：24%；
}
.lines_med2:之前{
宽度：27%；
}
.lines_med2：之后{
宽度：27%；
}
.台词(u long):之前{
宽度：38%；
}
.lines_long:之后{
宽度：38%；
}
*/
导航标志{
浮动：左；
}
导航标志img{
高度：80px；
过渡期：5s；
}
导航ul{
浮动：左；
保证金：0；
填充：0；
显示器：flex；
}
李国荣{
列表样式：无；
}
海军ulli a{
线高：80px；
颜色：#262626；
填充：5px20px；
文字装饰：无；
过渡：.5s；
}
导航ulli a：悬停{
颜色：#fff；
背景：#00a6a6；
文字装饰：无；
}
页脚{
宽度：100%；
背景色：#00a6a6；
填充：3%；
颜色：#FFF；
}
.carousel-control.left、.carousel-control.right{
背景图像：无！重要；
过滤器：无！重要；
}
.容器液体{
最大宽度：1200px；
}
页脚.容器流体{
最大宽度：100%；
}
.页脚链接a h4{
颜色：#fff；
}
.footer\u链接a:悬停{
颜色：#fff；
文字装饰：下划线；
}
.faq a：悬停{
文字装饰：无！重要；
}
.info_容器{
最大宽度：1920像素；
宽度：100%；
保证金：0自动；
}
.信息框h2{
文本对齐：居中；
}
.info_标题{
垫面：4%；
垫底：4%；
}
.底部填充物{
垫底：4%；
}
.info\u字体{
字号：18px；
}
.mv_字体{
字体大小：20px；
文本对齐：左对齐；
}
.contact\u字体{
字体大小：20px；
文本对齐：居中；
}
.center\u字体{
保证金：0自动；
文本对齐：居中；
}
#图标{
最大宽度：90%；
}
@介质（最大宽度：600px）{
#图标{
最大宽度：150px；
}
h4{
字体大小：1.7em；
}
}
/*联系页面*/
.文本\字段\设计{
填充：50px 0 80px；
文本对齐：居中；
}
.text_field_design p{
填充底部：80px；
颜色：#7373；
}
.文本\字段\设计h2{
颜色：#4c；
利润率：20px 0 20px；
}
.文本\字段\设计.输入组{
边缘底部：25px；
}
.输入组插件{
填充：-50px！重要；
字体大小：20px；
}
.text\u field\u design.form控件{
边界半径：0！重要；
}
.文本\字段\设计跨度{
边界半径：0！重要；
}
.text\u field\u design.btn{
边界半径：0；
宽度：100%；
字体大小：15px；
背景色：#f08300；
颜色：#fff；
}
.text\u field\u design.btn:悬停{
背景色：#f3a64c；
颜色：#fff！重要；
}
.box_shadow{
盒影：10px 10px 5px灰色；
}
.弯曲的{
边界半径：10px；
}
/*登记册*/
.reg_盒{
宽度：90%；
填充：70px 70px 10px；
背景：#fff；
最高：50%；
左：50%；
保证金：0自动；
不透明度：0.9；
边界半径：30px；
}
.reg_框p{
保证金：0；
填充：0；
字体大小：