Html 将文本垂直居中放置在自定义复选框旁边？

我已经找到了一些与这个主题相关的帖子，但是在我的场景中似乎没有答案，我假设是因为我的复选框自定义类

本质上，我只是希望复选框旁边的文本始终与它垂直对齐，但垂直对齐行为根据复选框是否选中而有所不同

我为文本和复选框设置了

字体大小

、

高度

和

行高度

，这似乎没有什么区别。我还尝试了

内容：“\200b”，但这似乎也没有什么区别

此外，我无法使用“更新的”html/css内容，因为这适用于在flexbox之前使用旧版本html/css的应用程序


.lvl1Name{
线高：22px；
高度：22px；
字体大小：22px；
}
.checkboxBig{
-webkit外观：无；
宽度：22px；
线高：22px；
高度：22px；
字体大小：22px；
背景：白色；
边界半径：0px；
边框：2px实心#144b68；
线高：10px；
左侧填充：1px；
文本对齐：居中；
}
.checkboxBig:悬停{
背景：#80AED1；
}
.checkboxBig:选中{
背景：#DAE5EB；
}
.checkboxBig:选中：之后{
内容：“\2713”；
字体大小：22px；
左侧填充：1px；
文本对齐：居中；
颜色：#144b68；
线高：22px；
}
.checkboxBig:选中：悬停{
背景：#80AED1；
}

测试
您可以使用。在代码片段中，我添加了一个类
复选框包装器
，以允许定位
div
，并用于将其居中


.checkbox包装器{
显示器：flex；
对齐项目：居中；
}
.lvl1名称{
线高：22px；
高度：22px；
字体大小：22px；
}
.checkboxBig{
-webkit外观：无；
宽度：22px；
线高：22px；
高度：22px；
字体大小：22px；
背景：白色；
边界半径：0px；
边框：2px实心#144b68；
线高：10px；
字体大小：30px；
左侧填充：1px；
文本对齐：居中；
}
.checkboxBig:悬停{
背景：#80AED1；
}
.checkboxBig:选中{
背景：#DAE5EB；
}
.checkboxBig:选中：之后{
内容：“\2713”；
字体大小：30px；
左侧填充：1px；
文本对齐：居中；
颜色：#144b68；
线高：9px；
}
.checkboxBig:选中：悬停{
背景：#80AED1；
}

测试
您可以将包含这两个元素的类添加到
div
中，并使用
flex-box
css


.container{
显示器：flex；
对齐项目：居中；
}
.lvl1名称{
线高：22px；
高度：22px；
字体大小：22px；
}
.checkboxBig{
-webkit外观：无；
宽度：22px；
线高：22px；
高度：22px；
字体大小：22px；
背景：白色；
边界半径：0px；
边框：2px实心#144b68；
线高：10px；
字体大小：30px；
左侧填充：1px；
文本对齐：居中；
}
.checkboxBig:悬停{
背景：#80AED1；
}
.checkboxBig:选中{
背景：#DAE5EB；
}
.checkboxBig:选中：之后{
内容：“\2713”；
字体大小：30px；
左侧填充：1px；
文本对齐：居中；
颜色：#144b68；
线高：9px；
}
.checkboxBig:选中：悬停{
背景：#80AED1；
}

测试
尝试使用div中的
显示：flex
。使用flexbox通常有助于解决许多类似的问题。
请尝试使用
上的
位置：绝对
和
顶部
属性。lvlName
类和设置父元素上的
位置：实时
属性。
position属性设置元素在文档中的定位方式

有关
position
属性的更多信息，请参阅

.lvl1Name{
线高：22px；
高度：22px；
字体大小：22px；
位置：绝对位置；
顶部：5px；
}
.主分区{
位置：相对位置；
}


.lvl1Name{
线高：22px；
高度：22px；
字体大小：22px；
位置：绝对位置；
顶部：5px；
}
.checkboxBig{
-webkit外观：无；
宽度：22px；
线高：22px；
高度：22px；
字体大小：22px；
背景：白色；
边界半径：0px；
边框：2px实心#144b68；
线高：10px；
左侧填充：1px；
文本对齐：居中；
}
.checkboxBig:悬停{
背景：#80AED1；
}
.checkboxBig:选中{
背景：#DAE5EB；
}
.checkboxBig:选中：之后{
内容：“\2713”；
字体大小：22px；
左侧填充：1px；
文本对齐：居中；
颜色：#144b68；
线高：22px；
}
.checkboxBig:选中：悬停{
背景：#80AED1；
}
.主分区{
位置：相对位置；
}

测试
在您的情况下，使用相同的
字体大小
，
行高
和
高度
只需添加
垂直对齐：底部至
复选框


.lvl1Name{
字体大小：22px；
}
.checkboxBig{
垂直对齐：底部对齐；
-webkit外观：无；
宽度：22px；
线高：22px；
高度：22px；
字体大小：22px；
背景：白色；
边界半径：0px；
边框：2px实心#144b68；
线高：10px；
左侧填充：1px；
文本对齐：居中；
}
.checkboxBig:悬停{
背景：#80AED1；
}
.checkboxBig:选中{
背景：#DAE5EB；
}
.checkboxBig:选中：之后{
内容：“\2713”；
字体大小：22px；
左侧填充：1px；
文本对齐：居中；
颜色：#144b68；
线高：22px；
}
.checkboxBig:选中：悬停{
背景：#80AED1；
}

测试
很抱歉，我应该提到我不能使用“更新”的东西，如flexbox，因为这是用于使用旧版本HTML和CSS的应用程序。您需要支持IE9吗？其他一切都已受支持。对于“脱机”应用程序，html/css/js将不会在浏览器中呈现。这是一个公司应用程序，没有计划很快更新其内部渲染器。添加了一个额外的解决方案，希望能有所帮助！感谢您为我提供非flexbox解决方案！对不起，我应该