无序列表的中心列表项

Question

我试图建立一个家族树使用ul和li HTML元素。该代码可用here。它使用psedo元素来“绘制”连接器。但问题是，如果一个特定的人的名字太长的造型是有点过如以下：

我试图居中垂直连接器，使其在中心的父母之间的水平连接器。任何帮助将不胜感激。 codepen here

这是一块正在使垂直连接器的CSS：

.tree li:last-child::before{ 
    border-right: 1px solid #ccc; 
    border-radius: 0 5px 0 0; 

    -webkit-transform: translateX(1px); 
    -moz-transform: translateX(1px); 
    transform: translateX(1px); 

    -webkit-border-radius: 0 5px 0 0; 
    -moz-border-radius: 0 5px 0 0; 
    border-radius: 0 5px 0 0; 
} 
.tree li:first-child::after{ 
    border-radius: 5px 0 0 0; 
    -webkit-border-radius: 5px 0 0 0; 
    -moz-border-radius: 5px 0 0 0; 
} 

/*Time to add downward connectors from parents*/ 
.tree ul ul::before{ 
    content: ''; 
    position: absolute; top: -12px; left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; height: 32px; 
    z-index: -1; 
} 

.tree li a{ 
    border: 1px solid #ccc; 
    padding: 5px 10px; 
    text-decoration: none; 
    color: #666; 
    font-family: arial, verdana, tahoma; 
    font-size: 11px; 
    display: inline-block; 
    background: white; 

    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 

    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    transition: all 0.5s; 
} 
.tree li a+a { 
    margin-left: 20px; 
    position: relative; 
} 
.tree li a+a::before { 
    content: ''; 
    position: absolute; 
    border-top: 1px solid #ccc; 
    top: 50%; left: -21px; 
    width: 20px; 
} 

Answer 1

我能想到的唯一的事情是某种形式的“黑客”，增加了一个看不见的节点树：

<a href="#">Parent</a> 
<a href="#">Very long parent name Parent</a> 
<a href="#" style="visibility:hidden;">Parent</a> <!-- ugly hack that works --> 

它通过与所述相同的宽度左叶添加不可见的中心叶顶行（Parent）

Answer 2

我认为垂直酒吧应该可能来自锚定伪类 - 而不是来自无序列表。有一种很酷的“中心任何东西”技术，我认为适用于你的问题。这里有一个小片段我说：

.tree li a+a::after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    transform: translateX(-50%); 
    left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; 
    height: 21px; 
    z-index: -1;  
} 

的​​规则处理中心位，只需要一个相对定位的父的工作，你已经有了。我截取了一张如何应用于包含长名称的锚点的截图。