3
堆栈:流星+阵营+材料的UIMateriall-UI刷新指示符居中对齐horizontaly
Here`s我的我的 '主' 渲染器组件的全码:
// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS
render() {
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的下方,就像这张图中的旋转圆圈:
材料的UI here的文件,这个指标带有以下样式:
display: 'inline-block',
position: 'relative',
有了这个风格我不能对齐,水平居中,没有这个款式,我`吨甚至找到它我想要的地方。
我曾尝试:
- 保证金:0汽车 - >失败
- 的text-align:中心 - >失败
- 显示:柔性 - >失败的
- 组合1 & 2 - >失败
- 左= {$(窗口).WIDTH/2-20} - >这工作,但我想使用CSS只
请问您可以创建一个jsfiddle或jsbin来显示问题吗?你可以尝试删除'position:'relative''并检查? –
我建议将刷新指标组件包装在已被分类为flex的div中。然后用'justify-content:center'来居中。 – lux
@Adiya Singh对不起,但似乎没有办法在jsfiddle/jsbin上创建独立的material-UI示例... Material-UI此次只安装了NPM安装。 –