Block inline new

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><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
        </ul>
        <div class="float-tree-clear"></div>
    </div>
    <div class="float-tree-clear"></div>

    <div class="float-tree-center">
        <ul class="tree-child">
          <li><a href="#">lnk 1</a></li>
          <li><a href="#">lnk 2</a></li>
          <li><a href="#">lnk 3</a></li>
          <li><a href="#">lnk 4</a></li>
          <li><a href="#">lnk 5</a></li>
          <li><a href="#">lnk 6</a></li>
          <li><a href="#">lnk 7</a></li>
          <li><a href="#">lnk 8</a></li>
         </ul>
        <div class="float-tree-clear"></div>
    </div>
    <div class="float-tree-clear"></div>

    
   <div class="float-tree-center">
        <ul class="tree-child">
          <li><a href="#">Элемент 1</a></li>
          <li><a href="#">Элемент 2</a></li>
          <li><a href="#">Элемент 3</a></li>
          <li><a href="#">Элемент 4</a></li>
       </ul>
        <div class="float-tree-clear"></div>
    </div>
    <div class="float-tree-clear"></div>    

   <div class="float-tree-center">
        <ul class="tree-child">
          <li><a href="#">Элемент 1</a></li>
          <li><a href="#">Элемент 2</a></li>
          <li><a href="#">Элемент 3</a></li>
          <li><a href="#">Элемент 4</a></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 li {
  float: left;
  list-style-type: none;
  margin: 0 6px;
}
.float-tree-center ul a {
  display: block;
  height: 26px;
  line-height: 26px;
  text-decoration: none;
  color: #C12247;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0px 4px;
  background-color: #ffffff;
}
/* Стили для элементов ul li a внутри  float_center*/
/* style */

/* Остальные стили для странички*/
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;
}