Created
July 12, 2015 13:12
-
-
Save seoyoochan/fdf14a9501c5f6b0efc0 to your computer and use it in GitHub Desktop.
How To Center Floating elements - http://codepen.io/alexandredees/pen/ojaFr
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment