Html 在可变宽度容器内正确居中多个可变宽度子对象

我已将的简化版本复制到一个文档中

该代码用于使用HTML和CSS编写的树形图。上面的jsFiddle看起来不错

然而，在玩过之后，我发现，只有当子节点的大小与其父节点相同或更大时，节点相对于父节点的居中才真正起作用

我对css还是一个新手，但主要的问题似乎是所有元素都向左浮动

考虑一下，孩子比父母小得多。因为父对象被向左浮动，所以子对象也被向左浮动

如何修复此问题？

使用此选项：

body {text-align: center;}
.tree {overflow: hidden; display: inline-block;}

预览 /*现在是CSS*/ *{边距：0；填充：0；} 正文{文本对齐：居中；} .tree{溢出：隐藏；显示：内联块；} 树胶{ 填充顶部：20px；位置：相对； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } 李先生{ 浮动：左；文本对齐：居中； 列表样式类型：无； 位置：相对位置； 填充：20px 5px 0 5px； 文本对齐：居中； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } /*我们将使用：：before和：：after来绘制连接器*/ .tree li:：之前，.tree li:：之后{ 内容：； 位置：绝对；顶部：0；右侧：50%； 边框顶部：1px实心ccc； 宽度：50%；高度：20px； } 李树：之后{ 右：自动；左：50%； 左边框：1px实心ccc； } /*我们需要移除元素中的左右连接器，而不需要 有兄弟姐妹吗*/ .tree li:独生子女：：之后，.tree li:独生子女：：之前{ 显示：无； } /*删除单个子对象顶部的空间*/ .tree li:唯一的子项{padding top:0；} /*从第一个子系统上拆下左侧接头并拆下 上一个子节点的右连接器*/ .tree li:第一个孩子：：之前，.tree li:最后一个孩子：：之后{ 边界：0无； } /*将垂直连接件添加回最后一个节点*/ 李树：最后一个孩子：：之前{ 右边框：1px实心ccc； 边界半径：0 5px 0 0； -webkit边界半径：0 5px 0； -moz边界半径：0 5px 0； } 李树：第一个孩子：：之后{ 边界半径：5px0； -webkit边界半径：5px 0； -moz边界半径：5px 0； } /*从父级添加向下连接器的时间到了*/ .树ul：：以前{ 内容：； 位置：绝对；顶部：0；左侧：50%； 左边框：1px实心ccc； 宽度：0；高度：20px； } 李树先生{ 边框：1px实心ccc； 填充物：5px10px； 文字装饰：无； 颜色：666； 字体系列：arial、verdana、tahoma； 字体大小：11px； 显示：内联块； 边界半径：5px； -webkit边界半径：5px； -moz边界半径：5px； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } /*是时候使用一些悬停效果了*/ /*我们还将把悬停效果应用于元素的沿袭*/ .树李a:悬停，.树李a:悬停+ul李a{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } /*悬停时的连接器样式*/ .树李a:悬停+ul李：：之后， .树李a:悬停+ul李：：之前， .树李a:悬停+ul：：之前， .树李a:悬停+ul:：之前{ 边框颜色：94a0b4； } 使用以下命令：

body {text-align: center;}
.tree {overflow: hidden; display: inline-block;}

预览 /*现在是CSS*/ *{边距：0；填充：0；} 正文{文本对齐：居中；} .tree{溢出：隐藏；显示：内联块；} 树胶{ 填充顶部：20px；位置：相对； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } 李先生{ 浮动：左；文本对齐：居中； 列表样式类型：无； 位置：相对位置； 填充：20px 5px 0 5px； 文本对齐：居中； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } /*我们将使用：：before和：：after来绘制连接器*/ .tree li:：之前，.tree li:：之后{ 内容：； 位置：绝对；顶部：0；右侧：50%； 边框顶部：1px实心ccc； 宽度：50%；高度：20px； } 李树：之后{ 右：自动；左：50%； 左边框：1px实心ccc； } /*我们需要移除元素中的左右连接器，而不需要 有兄弟姐妹吗*/ .tree li:独生子女：：之后，.tree li:独生子女：：之前{ 显示：无； } /*删除单个子对象顶部的空间*/ .tree li:唯一的子项{padding top:0；} /*从第一个子系统上拆下左侧接头并拆下 上一个子节点的右连接器*/ .tree li:第一个孩子：：之前，.tree li:最后一个孩子：：之后{ 边界：0无； } /*将垂直连接件添加回最后一个节点*/ 李树：最后一个孩子：：之前{ 右边框：1px实心ccc； 边界半径：0 5px 0 0； -webkit边界半径：0 5px 0； -moz边界半径：0 5px 0； } 李树：第一个孩子：：之后{ 边界半径：5px0； -webkit边界半径：5px 0； -moz边界半径：5px 0； } /*从父级添加向下连接器的时间到了*/ .树ul：：以前{ C 内容：； 位置：绝对位置；排名：0；左：50%； 左边框：1px实心ccc； 宽度：0；高度：20px； } 李树先生{ 边框：1px实心ccc； 填充物：5px10px； 文字装饰：无； 颜色：666； 字体系列：arial、verdana、tahoma； 字体大小：11px； 显示：内联块； 边界半径：5px； -webkit边界半径：5px； -moz边界半径：5px； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } /*是时候使用一些悬停效果了*/ /*我们还将把悬停效果应用于元素的沿袭*/ .树李a:悬停，.树李a:悬停+ul李a{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } /*悬停时的连接器样式*/ .树李a:悬停+ul李：：之后， .树李a:悬停+ul李：：之前， .树李a:悬停+ul：：之前， .树李a:悬停+ul:：之前{ 边框颜色：94a0b4； } 我认为将显示设置为table和inline table可能会有所帮助。 将display:inline table设置为ul元素，将display:table设置为所有锚定标记，并与margin:0 auto组合使用，似乎可以正常工作

/*现在是CSS*/ *{边距：0；填充：0；} 树胶{ 填充顶部：20px；位置：相对； 显示：内联表； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } 李先生{ 浮动：左；文本对齐：居中； 列表样式类型：无； 位置：相对位置； 填充：20px 5px 0 5px； 文本对齐：居中； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 显示：列表项； } /*我们将使用：：before和：：after来绘制连接器*/ .tree li:：之前，.tree li:：之后{ 内容：； 位置：绝对；顶部：0；右侧：50%； 边框顶部：1px实心ccc； 宽度：50%；高度：20px； } 李树：之后{ 右：自动；左：50%； 左边框：1px实心ccc； } /*我们需要移除元素中的左右连接器，而不需要 有兄弟姐妹吗*/ .tree li:独生子女：：之后，.tree li:独生子女：：之前{ 显示：无； } /*删除单个子对象顶部的空间*/ .tree li:唯一的子项{padding top:0；} /*从第一个子系统上拆下左侧接头并拆下 上一个子节点的右连接器*/ .tree li:第一个孩子：：之前，.tree li:最后一个孩子：：之后{ 边界：0无； } /*将垂直连接件添加回最后一个节点*/ 李树：最后一个孩子：：之前{ 右边框：1px实心ccc； 边界半径：0 5px 0 0； -webkit边界半径：0 5px 0； -moz边界半径：0 5px 0； } 李树：第一个孩子：：之后{ 边界半径：5px0； -webkit边界半径：5px 0； -moz边界半径：5px 0； } /*从父级添加向下连接器的时间到了*/ .树ul：：以前{ 内容：； 位置：绝对；顶部：0；左侧：50%； 左边框：1px实心ccc； 宽度：0；高度：20px； } 李树先生{ 边框：1px实心ccc； 填充物：5px10px； 文字装饰：无； 颜色：666； 字体系列：arial、verdana、tahoma； 字体大小：11px； 显示：表格； 保证金：0自动； 边界半径：5px； -webkit边界半径：5px； -moz边界半径：5px； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } /*是时候使用一些悬停效果了*/ /*我们还将把悬停效果应用于元素的沿袭*/ .树李a:悬停，.树李a:悬停+ul李a{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } /*悬停时的连接器样式*/ .树李a:悬停+ul李：：之后， .树李a:悬停+ul李：：之前， .树李a:悬停+ul：：之前， .树李a:悬停+ul:：之前{ 边框颜色：94a0b4； } 我认为将显示设置为table和inline table可能会有所帮助。 将display:inline table设置为ul元素，将display:table设置为所有锚定标记，并与margin:0组合 工作

/*现在是CSS*/ *{边距：0；填充：0；} 树胶{ 填充顶部：20px；位置：相对； 显示：内联表； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } 李先生{ 浮动：左；文本对齐：居中； 列表样式类型：无； 位置：相对位置； 填充：20px 5px 0 5px； 文本对齐：居中； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； 显示：列表项； } /*我们将使用：：before和：：after来绘制连接器*/ .tree li:：之前，.tree li:：之后{ 内容：； 位置：绝对；顶部：0；右侧：50%； 边框顶部：1px实心ccc； 宽度：50%；高度：20px； } 李树：之后{ 右：自动；左：50%； 左边框：1px实心ccc； } /*我们需要移除元素中的左右连接器，而不需要 有兄弟姐妹吗*/ .tree li:独生子女：：之后，.tree li:独生子女：：之前{ 显示：无； } /*删除单个子对象顶部的空间*/ .tree li:唯一的子项{padding top:0；} /*从第一个子系统上拆下左侧接头并拆下 上一个子节点的右连接器*/ .tree li:第一个孩子：：之前，.tree li:最后一个孩子：：之后{ 边界：0无； } /*将垂直连接件添加回最后一个节点*/ 李树：最后一个孩子：：之前{ 右边框：1px实心ccc； 边界半径：0 5px 0 0； -webkit边界半径：0 5px 0； -moz边界半径：0 5px 0； } 李树：第一个孩子：：之后{ 边界半径：5px0； -webkit边界半径：5px 0； -moz边界半径：5px 0； } /*从父级添加向下连接器的时间到了*/ .树ul：：以前{ 内容：； 位置：绝对；顶部：0；左侧：50%； 左边框：1px实心ccc； 宽度：0；高度：20px； } 李树先生{ 边框：1px实心ccc； 填充物：5px10px； 文字装饰：无； 颜色：666； 字体系列：arial、verdana、tahoma； 字体大小：11px； 显示：表格； 保证金：0自动； 边界半径：5px； -webkit边界半径：5px； -moz边界半径：5px； 过渡：均为0.5s； -webkit过渡：所有0.5s； -moz转换：所有0.5s； } /*是时候使用一些悬停效果了*/ /*我们还将把悬停效果应用于元素的沿袭*/ .树李a:悬停，.树李a:悬停+ul李a{ 背景：c8e4f8；颜色：000；边框：1px实心94a0b4； } /*悬停时的连接器样式*/ .树李a:悬停+ul李：：之后， .树李a:悬停+ul李：：之前， .树李a:悬停+ul：：之前， .树李a:悬停+ul:：之前{ 边框颜色：94a0b4； }

---

这并不能解决问题，当父节点比子节点宽时，同样的问题仍然存在父节点具有内联块显示。您能否给出一个示例，如果它不起作用，我可以修复它@请保留CSS并将HTML替换为我在第二部分中提供的HTML。然后您将看到问题。这并不能解决问题，当父节点比子节点宽时，同样的问题仍然存在父节点具有内联块显示。您能否给出一个示例，如果它不起作用，我可以修复它@请保留CSS并将HTML替换为我在第二部分中提供的HTML。您将看到问题所在。@JayMoy，这是对标题的直接回答。但是，当子节点不是唯一的子节点时，这将不起作用。例如：我正在编辑问题标题以反映这一警告。@JayMoy如果每个子项都很小，那么简单地删除具有多个子项的类表单元素是不起作用的。例如，从我刚才提供的示例中的两个子类中删除该类，您将看到它偏离中心。@JayMoy这是对标题的直接回答。但是，当子节点不是唯一的子节点时，这将不起作用。例如：我正在编辑问题标题以反映这一警告。@JayMoy如果每个子项都很小，那么简单地删除具有多个子项的类表单元素是不起作用的。例如，从我刚才提供的示例中的两个子类中删除该类，您将看到它偏离中心

---

iple儿童也可以与多个儿童一起工作