Html CSS-如何在一行中对齐文本和图标

我需要将div内的图标和文本对齐一行，如下图所示：

我使用flexbox将

购物车图标

和

购物车部分

放在一行中

。购物车容器{
显示器：flex；
对齐项目：柔性端；
}
.购物车容器.购物车图标{
背景颜色：蓝色；
填充：0px；
文本对齐：bbo；
}
.购物车容器.购物车部分.购物车名称{
背景颜色：绿色；
填充：0px；
}
.购物车集装箱.购物车部分.购物车价格{
背景颜色：黄色；
填充：0px；
}

购物车
12 000

方法1：使用FLEX

这里，我使用flex解决了这个问题，将

display:flex

的属性赋予

购物车部分

。 现在，您可以将部分的子项（即购物车名称和购物车价格）分配给各自的Flex属性。它们是

flex-grow

。您可以在下面的示例中找到flex逻辑

。购物车容器{
显示器：flex；
}
.购物车容器.购物车图标{
背景颜色：蓝色；
填充：0px；
边框：1px纯黑；
}
.购物车容器.购物车部分{
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
}
.购物车容器.购物车部分.购物车名称{
背景颜色：绿色；
填充：0px；
柔性生长：1；
}
.购物车集装箱.购物车部分.购物车价格{
背景颜色：黄色；
填充：0px；
柔性生长：1；
}

购物车
12 000

最简单的方法是设置所有元素的高度

.shopping-cart-container .shopping-cart-icon { height: 50px;}
.shopping-cart-container .shopping-cart-section div {height: 25px; line-height: 25px; width: 150px; font-weight: bold;}

---

演示：

假设我正确理解了您的意思，那么使用Flexbox使用几行CSS就可以实现这一点-

.shopping-cart-section {
  display: flex;
  background: green;
  margin-top: auto;
}

这是代码笔结果-

购物车图标和文本“12000”必须与图片中的红线对齐。