Horizontally center fluid div containing elements set to float left - css

Question

I've successfully centred an inner div in a parent div but the elements contained in the inner div are not horizontally in line.
For my approach see demo.
I'm aware of the two most common apprroaches with centering a div in a div i.e. using HTML below:
HTML:
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
Centering method 1:
#inner {
width: 50%;
margin: 0 auto;
}
Centering method 2:
#outer {
text-align: center;
}
#inner {
display: inline-block;
}
Correct me if I'm wrong but:
Method 1 seems suitable if the inner div is to have a set width.
Method 2 seems suitable if the width of the inner div is fluid and say
contains only one element as multiple elements aren't horizontally in line.
EDIT:
What I describe in method two above is the issue I'm having i.e. rather than the outcome as seen in my demo this is what I'm trying to achieve.
<< < March - 2016 > >>
I'm looking for the best way to remedy this whilst making sure the width of the centred div is dynamic.

Answer 1

Simply align the inner elements as you did with the outer ones? What's the issue?
#calendarmonthcontrols > div, #calendarmonthcontrols > a {
display: inline-block;
}

Answer 2

You need to add inline-block, that will position the elements in center.
Working example:
Updated Fiddle
/* Wrapper div. That makes the inner div into an inline element that can be centered with text-align.*/
#calendaroverallcontrols {
text-align: center;
}
/* This is a fluid div as width will be changing */
#calendarmonthcontrols {
display: inline-block;
}
#btnPrevYr {
text-decoration: none;
font-size: 35px;
}
#btnPrev {
text-decoration: none;
font-size: 35px;
margin-left: 20px;
}
#monthandyear {
vertical-align: bottom;
padding:0 10px;
}
#btnNext {
text-decoration: none;
font-size: 35px;
margin-right: 20px;
}
#btnNextYr {
text-decoration: none;
font-size: 35px;
}
#calendarmonthcontrols a {
position:relative;
top:10px;
}
#calendarmonthcontrols a,
#calendarmonthcontrols div {
display: inline-block;
}
<div id="calendaroverallcontrols">
<!-- <div id="year"></div> -->
<div id="calendarmonthcontrols"> <a id="btnPrevYr" href="#" title="btnPrevYr"><span><<</span></a>
<a id="btnPrev" href="#" title="btnPrev"><span><</span></a>
<!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->
<!-- <div id="month"></div>-->
<div id="monthandyear">MARCH - 2015</div>
<!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>--> <a id="btnNext" href="#" title="btnNext"><span>></span></a>
<a id="btnNextYr" href="#" title="btnNextYr"><span>>></span></a>
</div>
</div>