HTML CSS 图片排列一排并添加文字

图片1

图片2

图片3

.image-container { display: flex; justify-content: space-between; }

.image-box { text-align: center; }

.image-box img { width: 100%; height: auto; }

.image-box p { margin-top: 10px; font-size: 14px; font-weight: bold; }

**解释：**

1. 使用一个包含所有图片的容器 div，并设置其 display 属性为 flex，这样可以让图片排列在同一行，并且自动适应父容器的宽度。

2. 对于每个图片，使用一个包含图片和文字的 div，并设置其 text-align 属性为 center，让图片和文字都居中显示。

3. 对于图片，设置其宽度为 100%，高度自适应。

4. 对于文字，设置其距离图片的上边距为 10px，字体大小为 14px，字体加粗。