title: React material-ui: centering items on Toolbar
body: <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>