Html 水平对齐div与显示：表格单元格

我有一张有吧台的桌子。我使用

display:table cell

来对齐底部的内容。问题是容器

div

s不再在其相应的

TH

s上水平对齐（其宽度未设置）

问题 使用

表单元格

-属性时的问题是，它的行为类似于“真实的表单元格”，而不再类似于

块

-或

内联

-元素。当缺少父元素

表行

和

表

时，将匿名生成它们。因此，该框将丢失所有内容，如

边距

您可以在此处了解更多信息：

---

我稍微重新构建了您的HTML结构，这似乎很好：

演示

CSS 这表示行高和字体大小为16px。设置

top:-16px

即可将其完全移出-额外的4px添加了一个漂亮的填充物。：）

希望你能明白

注 使用此属性的地方：

countunit="0_1_0"

由于这不是有效的HTML，请使用

数据

-前缀：

data-countunit="0_1_0"

---

这是有效的HTML5，在旧浏览器中也不会造成任何问题。

有一个技巧可以水平居中显示一个元素：另一个元素中的表格单元格

假设周围的元素有class.table包装器，内部元素有.table单元格。使用以下CSS：

.table-wrapper {
  display: table;
  width: 100%;
  text-align: center;
}
.table-cell {
  vertical-align: middle;
}

---

通过这种方式，您可以将文本或任何您想要的内容居中。表格单元格可以垂直，也可以水平。图形栏是否应该居中于红色的

s上？你能发布一张它应该是什么样子的图片吗？为了更具活力，你可以使用。“你考虑过这种可能性吗？”克里斯删除了我的答案，因为它确实不正确

countunit="0_1_0"

data-countunit="0_1_0"

.table-wrapper {
  display: table;
  width: 100%;
  text-align: center;
}
.table-cell {
  vertical-align: middle;
}