如何将tr内每个td单元格的内容居中对齐

调整要点 #

• 直接给表格内的td设置text-align: center，覆盖浏览器默认的左对齐样式，保证所有单元格内容默认居中
• 移除tr上无效的margin属性，table row元素本身不支持margin设置，添加后不会生效
• 给圆形元素.item添加水平自动边距，保证其在单元格内水平居中，不会因为自带的边距出现偏移

修改后的CSS代码 #

table {
  margin: 10px 0px;
}

.item {
  border: 1px solid #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: table;
  font-size: 16px;
  /* 新增：让圆形元素在单元格内水平居中 */
  margin-inline: auto;
}

.item>div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.mobile {
  display: table;
}

/* 新增：覆盖td默认左对齐样式 */
.mobile td {
  text-align: center;
}

.mobile tr {
  text-align: center;
}

.item {
  margin: 5px;
}

原有HTML代码无需修改，替换CSS即可实现效果：表格完全占满设置的100%宽度，所有内容均匀分布，视觉上没有多余空白。

内容的提问来源于stack exchange，提问作者ProteinDev