Stack：Meteor React Material-UI 这是我的’主’渲染器组件的完整代码： // Sorry for not giving material-UI CSS,// c
... . . Stack：Meteor React Material-UI
这是我的’主’渲染器组件的完整代码：
// Sorry for not giving material-UI CSS,// cause it cannot be served as stand-alone CSSrender() { return ( <div className = "container"> <AppBar title = "test" /> <Tabs /> // Tab contents goes here <RefreshIndicator left={70} // Required properties top={0} // Required properties status="loading" style={{ display: 'inline-block',position: 'relative',margin: '0 auto' }} /> </div> ); }, 我想让刷新指示器在myTabs下方水平居中对齐,就像这张照片中的旋转圆圈一样：
在Material-UI here的文档中,该指标带有以下样式：
display: 'inline-block',
有了这种风格,我不能将它水平对齐,没有这种风格,我甚至无法找到我想要的地方.
我尝试过的：
>保证金：0自动 – >失败
> text-align：center – >失败
> display：flex – >失败
> 1&组合2 – >失败
> left = {$(window).width / 2-20} – >这有效,但我只想使用CSS
解决方法
. 这是我如何确保它水平居中.对我来说很棒.
>将父组件样式设置为position：’relative’.
>将刷新指示器样式设置为marginLeft：’50％’,左= { – 20}(假设大小为40).
这是代码(我把它放在CardText组件中).
... <CardText style={{position: 'relative'}}> <RefreshIndicator size={40} left={-20} top={10} status={'loading'} style={{marginLeft: '50%'}} /> </CardText> .... . .. ...
