css 材质UI进度指示器中心水平对齐

ldioqlga 于 2023-05-30 发布在其他

关注(0)|答案(5)|浏览(148)

堆栈：Meteor + React + Material UI
以下是我的'main'渲染器组件的完整代码：

// Sorry for not giving material-UI CSS,
// cause it cannot be served as a 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',

有了这个样式，我不能水平对齐它的中心，没有这个样式，我甚至不能找到我想要的地方。
我所尝试的：

margin：0 auto -->失败
1.文本对齐：center -->失败
display：flex --> failed
1和2的组合-->失败
left={$（window）.width/2-20} -->这可以用，但我只想用CSS

css

来源：https://stackoverflow.com/questions/35870196/material-ui-progress-indicator-center-align-horizontally

5条答案

按热度按时间

myzjeezk1#

下面的解决方案将进度指示器居中，而无需任何导致元素偏移的繁琐计算：

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

赞(0）回复(0）举报 2023-05-30

l7wslrjt2#

下面是我如何确保它的水平居中。对我来说很好。
1.将父零部件样式设置为position: 'relative'。
1.将刷新指示器样式设置为marginLeft: '50%'和left={-20}（假设大小为40）。
下面是代码（我把它放在一个CardText组件中）。

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

赞(0）回复(0）举报 2023-05-30

eit6fx6z3#

Material UI v5**中有一个Stack组件，作为flexbox容器。默认情况下，方向为column，要将其水平居中，您可以将alignItems设置为center：

<Stack alignItems="center">
  <CircularProgress />
</Stack>

现场演示

赞(0）回复(0）举报 2023-05-30

js5cn81o4#

材料ui中的循环处理和页面堆栈中的文本溢出

<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]

赞(0）回复(0）举报 2023-05-30

nqwrtyyt5#

Backdrop Component将把进度指示器放在中间，还可以在应用程序上添加一个暗层。此组件可在MUI V5中使用。

<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>

赞(0）回复(0）举报 2023-05-30

我来回答

css 材质UI进度指示器中心水平对齐

5条答案

现场演示

相关问题

热门标签

最新问答