Amir Amir - 3 months ago 25
CSS Question

Embed the middle of the tree chart

Good day everyone!

sorry for my poor english language

How can I put this chart tree in the middle of the screen?

I am using Twitter Bootstrap.

These are my html and css code:



* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20px; position: relative;
font-family:'B Yekan', tahoma, Arial;font-size:12px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
.tree li:only-child{ padding-top: 0;}
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-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;
}
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}

.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
display: inline-block;

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

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}

<div class="tree">
<ul>
<li><a href="#">main</a>
<ul>
<li>
<a href="#">row2</a>
<ul>
<li>
<a href="#">row3</a>
</li>
<li>
<a href="#">row3</a>
</li></ul></li>
<li><a href="#">row2</a>
<ul>
<li><a href="#">row3</a>
</li>
<li><a href="#">row3</a>
<ul>
<li><a href="#">row4</a>
</li>
<li><a href="#">row4</a>
</li>
<li><a href="#">row4</a>
</li></ul></li></ul></li></ul></li></ul></div>





How can I put this chart tree in the middle of the screen?

Answer

There are different ways to do that, but one of them is using flex.
Add to your class tree this css:

.tree {
 position: absolute;
 height: 100%;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}

Hope this helps!

Comments