React material-ui：工具栏上的中心项目 [英] React material-ui: centering items on Toolbar

问题描述

我正在尝试在页面上实现一个工具栏，其中我有三个 ToolbarGroup 组件：

I am trying to implement a toolbar on a page in which I have three ToolbarGroup components:

            <Toolbar>
                <ToolbarGroup firstChild={true} float="left">
                    {prevButton}
                </ToolbarGroup>

                <ToolbarGroup>
                    {releaseBtn}
                </ToolbarGroup>

                <ToolbarGroup lastChild={true} float="right">
                    {nextButton}
                </ToolbarGroup>
            </Toolbar>

一般的想法是 prevButton 应该呈现一直到工具栏的左边（确实如此）， nextButton 应该一直向右渲染（确实如此）......以及 releaseBtn 应该在工具栏上居中（当前不会发生）。

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

根据 material-ui docs 似乎没有一些简单的设置 centered = {true} - 我怎么能做到这一点？

Per the material-ui docs there doesn't appear to be some easy setting for centered={true}-- how can I accomplish this?

我尝试手动将中间 ToolbarGroup 的样式设置为 margin：0px自动但这似乎没有帮助。

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

推荐答案

我的最终解决方案是做这个：

The final solution for me was to do this:

            <Toolbar>
                <ToolbarGroup firstChild={true} float="left">
                    {prevButton}
                </ToolbarGroup>

                <ToolbarGroup style={{ 
                    float       : 'none', 
                    width       : '200px',
                    marginLeft  : 'auto',
                    marginRight : 'auto'
                }}>
                    {releaseBtn}
                </ToolbarGroup>

                <ToolbarGroup lastChild={true} float="right">
                    {nextButton}
                </ToolbarGroup>
            </Toolbar>

我首先必须设置中间 ToolbarGroup 没有浮动（不是通过材料-ui道具的选项），然后玩宽度/边距。我想你的里程可能会有所不同，具体取决于你在工具栏中的内容。

I first had to set the middle ToolbarGroup with no float (not an option through the material-ui props) and then play with the width/margins. I imagine your mileage may vary depending on what you shove inside the ToolbarGroup.

这篇关于React material-ui：工具栏上的中心项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！