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.
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.
<!-- 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> |
// 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 |
/* 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; | |
} |