尝试将文本与图标html/css对齐

我正在尝试将图标与以下文字对齐：

但结果是这样的：

。百分比{
浮动：对；
显示：内联块；
位置：相对位置；
}
.卡片图标{
浮动：左；
}

自行管理
1%

.card icon{float:left；margin right:10px；}

自行管理
1% 

.card图标{float:left；position:relative；z-index:1；}
.card图标：{content:“=”位置：相对；左侧：25px；}
.percent.card txt:n类型（1）{文本对齐：中心；位置：相对；左：-55px；}
.card txt{文本对齐：中心；宽度：400px；背景：#ddd；}

自行管理
1% 
服务税+增值税

尝试使用内联块而不是浮点数：

.card图标{
显示：内联块；
垂直对齐：中间对齐；
位置：相对位置；
z指数：1；
}
.卡片图标：之后{
内容：“=”；
位置：绝对位置；
右图：-16px；
最高：50%；
转化：translateY（-50%）；
}
.percent.card txt:n类型（1）{
文本对齐：居中；
}
.card txt{
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
左边距：24px；
}
.街区{
显示：块；
}

自行管理
1%
服务税+增值税

有时最好的解决方案是旧的解决方案。使用HTML表格可以通过高度浏览器支持和向后兼容性控制垂直高度。使用此方法还可以使元件响应。当调整浏览器窗口大小时，采用相对/绝对位置方法的其他解决方案可能会受到影响

表格{
保证金：0自动；
边框：1px纯蓝色；
}
表tr td{
填充：10px；
宽度：100px；
文本对齐：居中；
垂直对齐：中间对齐；
位置：相对位置；
}
表tr.数字单元{
填充顶部：10px；
宽度：80px；
}
表tr.数字单元格.值{
利润上限：4倍；
字体大小：42px；
}
表tr.编号单元格.小标题{
背景：灰色
}
表tr.相等单元格{
宽度：0px；
}
表tr td img{
宽度：100%；
}

我的网站
=
1%
服务费

如果您想要更多的控制，可以使用flex样式。例如：

.card{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
保证金：0；
填充：0；
宽度：500px；
}
.卡头{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
填充：10px；
背景颜色：蓝色；
颜色：白色；
字体大小：24px；
}
.卡片内容{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
背景颜色：灰色；
}
.card header>img{
位置：绝对位置；
右：0；
宽度：50px；
高度：50px；
}

自我管理
1%

如果CSS flex是一个选项，我会选择它。。你可以很容易地谷歌CSS flex指南，我将在flex属性上实现。对于父div，提供css属性“display:flex；align items:center；”。就是这样，现在儿童组的外观很好，符合你的设计。