首页 文章

Materiall-UI刷新指示器中心对齐水平

提问于
浏览 次
4

Stack：Meteor React Material-UI

这是我的'主'渲染器组件的完整代码：

// 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下方水平居中对齐，就像这张照片中的旋转圆圈一样：

enter image description here

在Material-UI here的文档中，此指标带有以下样式：

display: 'inline-block',
position: 'relative',

有了这种风格，我不能将它水平对齐，没有这种风格，我甚至无法找到我想要的地方 .

我尝试过的：

  • 保证金：0自动 - >失败

  • text-align：center - >失败

  • display：flex - >失败

  • 1＆2的组合 - >失败

  • left = {$（window）.width / 2-20} - >这有效，但我只想使用CSS

css reactjs material-ui

2 回答

  • 3

    这是我如何确保它水平居中 . 对我来说很棒 .

    • 将父组件样式设置为 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>
    ...
    回复于
  • 11

    下面的解决方案集中了进度指示器，没有任何导致元素被偏移的hacky计算：

    <div style={{display: 'flex', justifyContent: 'center'}}>
   <RefreshIndicator status="loading" />
</div>
    回复于

相关问题