A Pen by Md.Atiquzzaman Soikat.

How-To-Center-Floating-elements.markdown

How To Center Floating elements

This code helps you to center any floating elements on your page. It means you can center a floating container (with no specified width) regardless of the number of elements inside this conatianer.

A Pen by Md.Atiquzzaman Soikat on CodePen.

License.

index.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 children</p>
<section id="container">
  
    <div class="float_center">
        <ul class="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="clear"></div>
    </div>
    <div class="clear"></div>

    <div class="float_center">
        <ul class="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>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

</section>

script.js

// by Alexandre Dees
// www.alexandre-dees.com



/* *** ALSO CHECK : *** */

// "How to clear floats without using additional markup or :after selector ?"
// --> http://codepen.io/alexandredees/pen/qrgIH

// "How to create triangular shapes whithout using css3 ?"
// --> http://codepen.io/alexandredees/pen/xIKow

style.css

/* The Magic Float Center Code */
.float_center {
  float: right;

  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
.float_center > .child {
  position: relative;
  left: 50%;
}



/* style */
body {
  height:100%;
  width:100%;
  background-color: #dd9999;
  background-color: #E288A0;
  font-family: arial, sans-serif;
}
.clear {
  clear:both;
}

#title {
  text-align: center;
  color: #ffffff;
  margin: 40px 0 0 0;
}
#subtitle {
  text-align: center;
  color: #A00C2F;
  margin: 0;
}
#container {
  width: 500px;
  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;
}
ul {
  list-style-type: none;
  margin:0;
  padding:10px 0;
}
ul li {
  float: left;
  list-style-type: none;
  margin: 0 6px;
}
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;
}
p {
  margin: 0;
}