React material-ui: centering items on Toolbar
<p>I am trying to implement a toolbar on a page in which I have three <code>ToolbarGroup</code> components:</p>

<pre><code>            &lt;Toolbar&gt;
                &lt;ToolbarGroup firstChild={true} float="left"&gt;
                    {prevButton}
                &lt;/ToolbarGroup&gt;

                &lt;ToolbarGroup&gt;
                    {releaseBtn}
                &lt;/ToolbarGroup&gt;

                &lt;ToolbarGroup lastChild={true} float="right"&gt;
                    {nextButton}
                &lt;/ToolbarGroup&gt;
            &lt;/Toolbar&gt;
</code></pre>

<p>The general idea is that <code>prevButton</code> should render all the way to the left of the toolbar (it does), <code>nextButton</code> should render all the way to the right (it does)... and that <code>releaseBtn</code> should be centered on the toolbar (not currently happening).</p>

<p>Per the <a href="http://www.material-ui.com/#/components/toolbar" rel="nofollow">material-ui docs</a> there doesn't appear to be some easy setting for <code>centered={true}</code>-- how can I accomplish this? </p>

<p>I've tried manually setting the style on the middle <code>ToolbarGroup</code> to <code>margin: 0px auto</code> but that doesn't seem to help.</p>