【问题标题】:React Material UI - Center Box vertically [duplicate]React Material UI - 垂直中心框[重复]
【发布时间】:2022-01-03 16:50:16
【问题描述】:

我在我的内容上使用来自 MUI 的盒子包装器,并且我想将其垂直居中,因此在调整窗口大小和不同分辨率时它会做出响应。尝试使用所有“证明”组合,但没有帮助:

<Box 
      margin='auto'
      justifyContent='center'
      bgcolor='#404040'
      borderRadius='12px'
      boxShadow='2'
      width='1000px'
      height='700px'>
      <div className="title"> NBA Bet </div>
 </Box>
 

【问题讨论】:

    标签: reactjs material-ui


    【解决方案1】:

    您可以使用弹性显示模式:

    display='flex'
    justifyContent='center'
    

    【讨论】:

    • flex 可能有助于将框内的内容居中,但我想将框本身居中(框有 bgcolor,我希望它保存所有数据并居中)
    【解决方案2】:
    <Box
      display="flex"
      flexDirection="column"
      alignItems="center"
      bgcolor='#404040'
      borderRadius='12px'
      boxShadow='2'
      width='1000px'
      height='700px'
    >
      <div className="title"> NBA Bet </div>
     </Box>
    

    你应该研究一下 flexbox 如何让子元素垂直居中。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items

    不确定你使用的是什么版本的材料 ui 4 或 5,但你可以看看版本 4 中的Box 组件和弹性框。 https://v4.mui.com/system/flexbox/#align-items

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-05
      • 2019-08-08
      • 2022-08-13
      • 1970-01-01
      相关资源
      最近更新 更多