Materiall-UI刷新指示符居中对齐horizontaly

堆栈：流星+阵营+材料的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只

来源

2016-03-08 Junho Kim

请问您可以创建一个jsfiddle或jsbin来显示问题吗？你可以尝试删除'position：'relative''并检查？ –

我建议将刷新指标组件包装在已被分类为flex的div中。然后用'justify-content：center'来居中。 – lux

@Adiya Singh对不起，但似乎没有办法在jsfiddle/jsbin上创建独立的material-UI示例... Material-UI此次只安装了NPM安装。 –

以下是我如何确保其水平居中。对我很好。

将父组件样式设置为position: 'relative'。
将刷新指示器样式设置为marginLeft: '50%'和left={-20}（假定大小为40）。

这里是代码（我把它放在CardText组件中）。

... 
    <CardText style={{position: 'relative'}}> 
     <RefreshIndicator 
     size={40} 
     left={-20} 
     top={10} 
     status={'loading'} 
     style={{marginLeft: '50%'}} 
     /> 
    </CardText> 
    ...

来源

2016-03-12 01:02:18 realbug

谢谢！有用。 –

Materiall-UI刷新指示符居中对齐horizo​​ntaly

回答

相关问题

Materiall-UI刷新指示符居中对齐horizontaly