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 内不使用 span，例如 <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 属性。