在<li>中有一个<img>和<span>，如何让图标<img>始终在文字<span>的上方且两者都在<li>的左右上下居中

可以使用CSS的flex布局来实现图标<img>始终在文字<span>的上方且两者都在<li>的左右上下居中。具体步骤如下：

1. 首先，给<li>设置display: flex;和align-items: center;，这样可以使<li>的内容在垂直方向上居中对齐。

2. 然后，给<img>和<span>都设置margin: auto;，这样可以使它们在水平方向上居中对齐。

3. 接下来，给<img>设置display: block;，这样可以使它独占一行。

4. 最后，给<span>设置text-align: center;，这样可以使文字居中对齐。

下面是示例代码：

<style>
  li {
    display: flex;
    align-items: center;
  }

  img {
    display: block;
    margin: auto;
  }

  span {
    margin: auto;
    text-align: center;
  }
</style>

<ul>
  <li>
    <img src="icon.png" alt="图标">
    <span>文字内容</span>
  </li>
</ul>

这样，图标<img>就会始终在文字<span>的上方且两者都在<li>的左右上下居中了。