JSFiddle - React, Tailwind, and code Playground

by Samantha Edwards

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>
<div class="practice_box1">
</div>
<div class="practice_box2">
</div>

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;
}
.practice_box1, .practice_box2 {
  height: 100px;
  width: 100px; 
  background: white;
  border: solid 1px black;
}