如何通过css设置把html中li标签内的图片+标题按照图片在上标题在下的方式排列成一行

可以通过以下 CSS 代码实现：

li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

li img {
  order: 1;
}

li span {
  order: 2;
}

解释一下：

- `display: flex;` 将 `li` 元素设置为弹性布局
- `flex-direction: column;` 将子元素沿着垂直方向排列
- `align-items: center;` 将子元素在垂直方向上居中对齐
- `text-align: center;` 将子元素内的文本在水平方向上居中对齐
- `li img { order: 1; }` 将图片的排列顺序设为第一位
- `li span { order: 2; }` 将标题的排列顺序设为第二位

这样设置后，`li` 元素内的图片会排在上方，标题会排在下方，并且水平方向居中对齐。