如何将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 align="center">之类的td内，但它没有用。

如何将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属性。