css - 如何将 td 内的内容放在单元格中心水平？

Question

在标签内我可以有文本或图标，我用模板创建了这个

<td>
 <span style="margin-left: auto; margin-right: auto;">{{r['username']}}</span>
</td>
<td>
 <span style="margin-left: auto; margin-right: auto;">{% if r['nation'] == 1 %}
  <img src="../static/images/Flag_Native.png" />{% elif r['nation'] == 2 %}
  <img src="../static/images/Flag_American.png" />{% elif r['nation'] == 3 %}
  <img src="../static/images/Flag_Britain.png" />{% else %}
  <img src="../static/images/Flag_France.png"/>{% end %}
 </span>
</td>
<td>
 <span style="margin-left: auto; margin-right: auto;">{{r['score']}}
 </span>
</td>

我也尝试过只在 td like 内不使用跨度，<td align="center">但它没有用。

如何将 td 内的内容放在单元格中心水平？

Answer 1

尝试

<td style='margin: 0 auto; align:center;'>

或将其包装在 div 中

<td><div style='margin: 0 auto; align:center; width: 100%;'><span style="margin-left: auto; margin-right: auto;">{{r['username']}}</span></div></td>

div 可能是最好的，因为我认为还需要设置 width 属性。