树图中的间距

Question

编辑：上面的图片是树现在的样子。我想让它看起来像一棵普通的树，每个父母都在它的两个孩子之间。

如何计算所包含图像中每个块周围的边距，以便每个父项位于其两个孩子的正上方？

我试图在HTML中显示二叉树的表示，其中每一代都有自己的div（用短划线分隔）。每个块也是生成div中的自己的div，设置为display: inline-block;。这些块居中，因为每一代都有text-align: center;

为了在两个孩子之间对齐每个父母，间距因世代而异。我该如何计算这个间距？另外，在HTML中更容易实现这一点，而不仅仅是像我现在那样在各个块中添加填充？

谢谢！