Question

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

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

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

使用这种样式我不能将它水平对齐，没有这种样式，我甚至无法找到它想要的地方。

我尝试过：

保证金：0自动 - ＆gt;失败
text-align：center - ＆gt;失败
display：flex - ＆gt;失败
1＆amp;组合2 - ＆gt;失败
left = {$（window）.width / 2-20} - ＆gt;这有效，但我只想使用CSS

Answer 1

以下是我如何确保它水平居中。对我很有用。

将父组件样式设置为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>
    ...

Answer 2

下面的解决方案使进度指示器居中，而没有任何过分计算导致元素偏移：

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

Answer 3

material ui 中的circularprocess 和页面stackoverflow 的文本中间

 <div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
                                <CircularProgress />
                                <span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
                            </div>[![enter image description here][1]][1]

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

3 个答案: