How to Center Floated Divs in a Container
It is possible. Using http://www.pmob.co.uk/pob/centred-float.htm and http://css-discuss.incutio.com/wiki/Centering_Block_Element as a source.
Here is a fiddle demonstrating the concept, using the HTML and CSS from below: https://jsfiddle.net/t9qw8m5x/
<div id="outer">
<ul id="inner">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2 with long text</a></li>
<li><a href="#">Button 3</a></li>
</ul>
</div>
This is the minimum CSS needed for the effect:
#outer {
float: right;
position: relative;
left: -50%;
}
#inner {
position: relative;
left: 50%;
}
#inner > li {
float: left;
}
Explanation:
Start off with just the li { float: left; }
rule. Then wrap those floats in the left: 50%; relative position
, so the left edge of the <ul>
's box is in the horizontal centre of the page, then use the rules in #outer
to correctly adjust it so the centre of #inner
is aligned with the page.