Html 尝试使用flexbox将同一行上的3个图像和3个文本对齐

我正在尝试对齐3个li项目，但我不确定我做错了什么。我尝试了flexbox的不同选项，但没有任何东西使文本行向上移动，我尝试将它们放入标记中，但这只会增加间距

我还想知道，是否有可能像我所做的那样，在不增加这么大利润的情况下“推动”折扣部分？我觉得没有必要留保证金

非常感谢您的帮助

立即付款，即可享受25%的折扣

Lorem ipsum dolor sit amet，是一位杰出的献身者。

Lorem ipsum dolor sit amet，是一位杰出的献身者
Lorem ipsum dolor sit amet，是一位杰出的献身者

加入健身房
.第3节{
背景图片：url（“img/add bg.jpg”）；
高度：600px；
背景重复：无重复；
背景尺寸：封面；
背景位置：上中；
}
.第3节包裹{
显示器：flex；
证明内容：柔性端；
右边距：250px；
}
.第3节正文{
颜色：白色；
}
.第3节课文李{
列表样式类型：无；
}
.测试{
显示器：flex；
证明内容：；
}

使您的

li

元素a

显示：flex；对齐项目：居中

，并用

div

环绕图像。内联元素（如图像）有时在与文本对齐时会表现出一些不同的行为。

添加额外的css

.test ul {
  margin:0px;
  padding:0px
}

.section3text li {
    list-style-type: none;
    display: flex;
}
.section3text li img{
margin-right:8px;
}

---

我希望这是你所期望的：

。第3节{
背景图像：url（“https://dummyimage.com/100x100/000/fff");
高度：400px；
背景重复：无重复；
背景尺寸：封面；
背景位置：上中；
}
.第3节包裹{
显示器：flex；
身高：继承；
}
.第3节正文{
颜色：白色；
宽度：50%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.测试ul{
填充：0；
}
.第3节课文李{
列表样式类型：无；
填充：4px；
线高：15px；
对齐项目：居中；
显示器：flex；
}
.第3节下一节{
填充：4px；
}
.测试{
显示器：flex；
}
.site-btn2{
背景颜色：黄色；
宽度：100px；
显示器：flex；
证明内容：中心；
线高：40px；
颜色：黑色；
边界半径：3px；
}

立即付款，即可享受25%的折扣

Lorem ipsum dolor sit amet，是一位杰出的献身者。

Lorem ipsum dolor sit amet，是一位杰出的献身者
Lorem ipsum dolor sit amet，是一位杰出的献身者

加入健身房

现在有什么问题吗？文本对齐正确，但3幅图像不像第一幅图像那样位于字母“a”下方。垂直对齐：中间css到图像到。第3节？我只是添加了它，没有任何更改；/。section3text li img{右边距：8px；文本对齐：居中；}这部分解决了问题。文本确实与图像对齐，但现在图像和文本不在第一张图片中看到的字母“a”下面……有什么想法吗？@leehward可能您的代码在

ul

左侧有一些填充/边距，或者

li

是由任何通用元素继承的。还有人能帮忙吗？请查看我的答案

.test ul {
  margin:0px;
  padding:0px
}

.section3text li {
    list-style-type: none;
    display: flex;
}
.section3text li img{
margin-right:8px;
}