Block inline realise

by 3axap

HTML

<section id="tree-container">
    <div class="float-tree-center">
        <ul class="tree-child">
            <li>
                <div>
                    <div class="tree-catname"> <a href="#">Категория</a>

                        <img src="//placehold.it/80x80" alt="pic" height="80" width="80">
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <div class="tree-catname"> <a href="#">Длинная категория</a>

                        <img src="//placehold.it/80x80" alt="pic" height="80" width="80">
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <div class="tree-catname"> <a href="#">Категория</a>

                        <img src="//placehold.it/80x80" alt="pic" height="80" width="80">
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <div class="tree-catname"> <a href="#">Категория</a>

                        <img src="//placehold.it/80x80" alt="pic" height="80" width="80">
                    </div>
                </div>
            </li>
        </ul>
        <div class="float-tree-clear"></div>
    </div>
    <div class="float-tree-clear"></div>
</section>

CSS

/* Магия плавающих блоков в центре */
 .float-tree-center {
    float: right;
    position: relative;
    left: -50%;
    /* or right 50% */
    text-align: left;
}
.float-tree-center > .tree-child {
    position: relative;
    left: 50%;
}
/* Стили для элементов ul li a внутри  float_center*/
 .float-tree-center ul {
    list-style-type: none;
    margin:0;
    padding:10px 0;
}
.float-tree-center ul {
    float: left;
    list-style-type: none;
    margin: 0 6px;
}
.float-tree-center li {
    float: left;
    list-style-type: none;
    margin: 4px 6px;
    width:110px;
    height:122px;
    background-color: #ffffff;
}
.tree-catname img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding: 12px 0px;    
}
.float-tree-center ul a {
    display: block;
    height: 20px;
    line-height: 16px;
    text-decoration: none;
    color: #C12247;
    font-weight: normal;
    font-size: 0.8em;
    text-transform: uppercase;
    padding: 1px 0px; 
    background-color: #ffffff;
    text-align: center;
}
/* Стили для элементов ul li a внутри  float_center*/

/* style */

/* Остальные стили для странички*/
 .tree-catname {
    display: inline;
}
body {
    height:100%;
    width:100%;
    background-color: #dd9999;
    background-color: #E288A0;
    font-family: arial, sans-serif;
}
.float-tree-clear {
    clear:both;
}
#tree-container {
    width: 90%;
    margin: 10px auto 0 auto;
    background-color: #E288A0;
    background-color: rgba(255, 255, 255, 0.5);
    border: 6px solid #B71F45;
    padding: 20px;
    border-radius: 0;
}