HTML Float Center using CSS
HTML
<h2 id="title">HTML Float Center</h2>
<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="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</section>
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: #A44A3F;
font-family: arial, sans-serif;
}
.clear {
clear:both;
}
#title {
text-align: center;
color: #ffffff;
margin: 100px 0 0 0;
}
#container {
width: 500px;
margin: 40px auto 0 auto;
background-color: #F1F7ED;
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 {
text-decoration: none;
color: #B33951;
font-weight: bold;
text-transform: uppercase;
}
