Olá, eu preciso centralizar corretamente este modelo de árvore binária.

jQuery ou javascript podem ser usados.

Eu vou precisar gerar o código com PHP, então precisa ter certa lógica no html.

Outro detalhe legal, é que conseguisse criar um overflow-X automáticamente, permitindo que a janela se adaptasse(crescer) conforme aumenta a árvore.

Criei este [Fiddle][1].

Obrigado desde já.

Html:

    <div class='container'>
    <div class='row'>
        <div class='root node'>
            <p><i class="fa fa-user"></i></p>
            <p>root name</p>
            <p>150</p>
            <div class='lft'>
                <p><i class="fa fa-user"></i></p>
                <p>lft name</p>
                <p>200</p>
                <div class='node'>
                    <div class='lft'>
                        <p><i class="fa fa-user"></i></p>
                        <p>lft name</p>
                        <p>100</p>
                        <div class='lft'>
                            <p><i class="fa fa-user"></i></p>
                            <p>lft name</p>
                            <p>200</p>
                            <div class='node'>
                                <div class='lft'>
                                    <p><i class="fa fa-user"></i></p>
                                    <p>lft name</p>
                                    <p>50</p>
                                    <div class='lft'>
                                        <p><i class="fa fa-user"></i></p>
                                        <p>lft name</p>
                                        <p>50</p>
                                    </div>
                                    <div class='rgt'>
                                        <p><i class="fa fa-user"></i></p>
                                        <p>rgt name</p>
                                        <p>100</p>
                                    </div>
                                </div>
                                <div class='rgt'>
                                    <p><i class="fa fa-user"></i></p>
                                    <p>rgt name</p>
                                    <p>150</p>
                                </div>
                            </div>
                        </div>
                        <div class='rgt'>
                            <p><i class="fa fa-user"></i></p>
                            <p>rgt name</p>
                            <p>50</p>
                        </div>
                    </div>
                    <div class='rgt'>
                        <p><i class="fa fa-user"></i></p>
                        <p>rgt name</p>
                        <p>0</p>
                    </div>
                </div>
            </div>
            <div class='rgt'>
                <p><i class="fa fa-user"></i></p>
                <p>rgt name</p>
                <p>100</p>
                <div class='node'>
                    <div class='lft'>
                        <p><i class="fa fa-user"></i></p>
                        <p>lft name</p>
                        <p>50</p>
                    </div>
                    <div class='rgt'>
                        <p><i class="fa fa-user"></i></p>
                        <p>rgt name</p>
                        <p>100</p>
                        <div class='node'>
                            <div class='lft'>
                                <p><i class="fa fa-user"></i></p>
                                <p>lft name</p>
                                <p>50</p>
                                <div class='lft'>
                                    <p><i class="fa fa-user"></i></p>
                                    <p>lft name</p>
                                    <p>150</p>
                                </div>
                                <div class='rgt'>
                                    <p><i class="fa fa-user"></i></p>
                                    <p>rgt name</p>
                                    <p>200</p>
                                </div>
                            </div>
                            <div class='rgt'>
                                <p><i class="fa fa-user"></i></p>
                                <p>rgt name</p>
                                <p>50</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


jQuery:

    $('.node').each(function(){
    var vm = $(this);
    lftwid = vm.children(".lft").width();
    console.log(lftwid);
    rgtwid = vm.children(".rgt").width();
    if (lftwid > rgtwid) {
        vm.children(".rgt").width(lftwid);
    } else if (lftwid < rgtwid) {
        vm.children(".lft").width(rgtwid);
    }
});
    
    

Css:

    .root {
    position: absolute !important;
    margin:0;
    padding:0;
    overflow-x: auto;
    display:block;
    text-align:center;
    background-color: #ddd;
    }
    .node {
    width: auto;
    height:auto;
    }
    .lft, .rgt {
    margin:5px;
    margin-top: 20px;
    min-width:60px;
    min-height:60px;
    position:relative;
    }
    .rgt {
    border:1px solid #000;
    float:right;
    background-color: #ccc;
    }
    .lft {
    border:1px solid #fff;
    float:left;
    background-color: #eee;
    }


  [1]: http://jsfiddle.net/aymone/xajh4qwb/