Block inline work

by 3axap

HTML

<!-- We want to center our <ul> into the container REGARDLESS of the number of <li> inside our <ul> -->

<h1 id="title">How to center floating elements</h1>

<p id="subtitle">Without setting a width <b>&</b> Regardless of the number of tree-children</p>
<section id="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:110px;
    background-color: #ffffff;
}
.tree-catname img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.float-tree-center ul a {
    display: block;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    color: #C12247;
    font-weight: bold;
    font-size: 0.8em;
    text-transform: uppercase;
    padding: 0px 4px;
    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;
}
#title {
    text-align: center;
    color: #ffffff;
    margin: 40px 0 0 0;
}
#subtitle {
    text-align: center;
    color: #A00C2F;
    margin: 0;
}
#container {
    width: 80%;
    margin: 20px auto 0 auto;
    background-color: #E288A0;
    background-color: rgba(255, 255, 255, 0.5);
    border: 7px solid #B71F45;
    padding: 20px;
    border-radius: 10px;
}
p {
    margin: 0;
}