並べ替えられていないリストの中央のリスト項目

Question

ulとli HTML要素を使用してファミリーツリーを構築しようとしています。コードはhereです。 psedo要素を使用してコネクタを「描画」します。しかし問題は、以下に見られるようなスタイリングは少しオフになっている場合には、特定の人物の名前が長すぎるということです。

私はそれが中心になるように、垂直方向のコネクタを中央にしようとしています2つの親の間の水平コネクタのどんな助けでも大歓迎です。

.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

私は考えることができる唯一のことは、ツリーに見えないノードを追加する「ハック」のいくつかの種類である：

このcodepen hereは垂直コネクタを行っているCSSの作品です

それは左葉（ Parent）と同じ幅で不可視リーフを追加することにより、一番上の行を中央

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

Answer 2

Iは垂直と思いますバーは、アンカーリストからではなく、アンカー疑似クラスから来るべきです。あなたの問題に当てはまると思う、クールな「センターの何か」テクニックがあります。ここで私は追加少し抜粋です：

.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;  
} 

​​のルールが中心ビットを処理し、あなたが既に持っている、仕事にのみ、相対位置の親を必要としています。長い名前を含むアンカーにどのように適用されるかのスクリーンショットを撮りました。