title: Center binary tree with css or js
body: <p><strong>TRANSLATED:</strong></p>
  
  <p>I need to centralize this binary tree with css or js .</p>
  
  <p>Jquery is an available option.</p>
  
  <p>The html code will be generated by php script nested array format.</p>
  
  <p>I have created this <a href="http://jsfiddle.net/aymone/xajh4qwb/" rel="nofollow">Fiddle</a> for help.</p>
  
  <p>thanks in advance</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class='container'&gt;
  &lt;div class='row'&gt;
      &lt;div class='root node'&gt;
          &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p&gt;root name&lt;/p&gt;
          &lt;p&gt;150&lt;/p&gt;
          &lt;div class='lft'&gt;
              &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;p&gt;lft name&lt;/p&gt;
              &lt;p&gt;200&lt;/p&gt;
              &lt;div class='node'&gt;
                  &lt;div class='lft'&gt;
                      &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                      &lt;p&gt;lft name&lt;/p&gt;
                      &lt;p&gt;100&lt;/p&gt;
                      &lt;div class='lft'&gt;
                          &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                          &lt;p&gt;lft name&lt;/p&gt;
                          &lt;p&gt;200&lt;/p&gt;
                          &lt;div class='node'&gt;
                              &lt;div class='lft'&gt;
                                  &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                                  &lt;p&gt;lft name&lt;/p&gt;
                                  &lt;p&gt;50&lt;/p&gt;
                                  &lt;div class='lft'&gt;
                                      &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                                      &lt;p&gt;lft name&lt;/p&gt;
                                      &lt;p&gt;50&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div class='rgt'&gt;
                                      &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                                      &lt;p&gt;rgt name&lt;/p&gt;
                                      &lt;p&gt;100&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class='rgt'&gt;
                                  &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                                  &lt;p&gt;rgt name&lt;/p&gt;
                                  &lt;p&gt;150&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class='rgt'&gt;
                          &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                          &lt;p&gt;rgt name&lt;/p&gt;
                          &lt;p&gt;50&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class='rgt'&gt;
                      &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                      &lt;p&gt;rgt name&lt;/p&gt;
                      &lt;p&gt;0&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='rgt'&gt;
              &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;p&gt;rgt name&lt;/p&gt;
              &lt;p&gt;100&lt;/p&gt;
              &lt;div class='node'&gt;
                  &lt;div class='lft'&gt;
                      &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                      &lt;p&gt;lft name&lt;/p&gt;
                      &lt;p&gt;50&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class='rgt'&gt;
                      &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                      &lt;p&gt;rgt name&lt;/p&gt;
                      &lt;p&gt;100&lt;/p&gt;
                      &lt;div class='node'&gt;
                          &lt;div class='lft'&gt;
                              &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                              &lt;p&gt;lft name&lt;/p&gt;
                              &lt;p&gt;50&lt;/p&gt;
                              &lt;div class='lft'&gt;
                                  &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                                  &lt;p&gt;lft name&lt;/p&gt;
                                  &lt;p&gt;150&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class='rgt'&gt;
                                  &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                                  &lt;p&gt;rgt name&lt;/p&gt;
                                  &lt;p&gt;200&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class='rgt'&gt;
                              &lt;p&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/p&gt;
                              &lt;p&gt;rgt name&lt;/p&gt;
                              &lt;p&gt;50&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Css:</p>
  
  <pre><code>.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;
  }
  </code></pre>