WordPress Hosting
Free Photos
WordPress Themes

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; }
JAVASCRIPT
Expand for more options Login