css - 水平居中的流体 div 包含设置为向左浮动的元素

Question

我已经成功地将父 div 中的内部 div 居中，但内部 div 中包含的元素没有水平对齐。

关于我的方法，请参阅 demo .

我知道两种最常见的将 div 置于 div 中心的方法，即使用下面的 HTML:

HTML:

<div id="outer" style="width:100%">  
<div id="inner">Foo foo</div>

居中方法一:

#inner {
    width: 50%;
    margin: 0 auto;
}

居中方法二:

#outer {
    text-align: center;
}

#inner {
    display: inline-block;
}

如果我错了请纠正我，但是:

• 如果内部 div 具有设置的宽度，方法 1 似乎合适。

• 如果内部 div 的宽度是流动的，则方法 2 似乎合适 仅包含一个元素，因为多个元素未水平排成一行。

编辑:

我在上面的方法二中描述的是我遇到的问题，即我正在努力实现的结果，而不是我演示中看到的结果。

                            <<  <  March - 2016  >  >>

我正在寻找解决此问题的最佳方法，同时确保居中 div 的宽度是动态的。

Answer 1

像对齐外部元素一样简单地对齐内部元素？有什么问题？

#calendarmonthcontrols > div, #calendarmonthcontrols > a {
    display: inline-block;
}