(React/Material-ui)material-ui 中纸张组件内的居中文本答案

【问题标题】：(React/Material-ui)center text inside paper component in material-ui(React/Material-ui)material-ui 中纸张组件内的居中文本
【发布时间】：2021-05-26 04:51:57
【问题描述】：

我一直试图在材料 ui 的纸质组件内居中文本，但目前没有任何效果。我尝试在父组件中使用 display:flex 并在子组件中使用 align-items:center ，并且我尝试使用 padding:5px 来获得相等的填充，但它不起作用，并且绝对尝试了 text-align 和 vertical-align 和一切都没有奏效这是它目前的样子：

我正在尝试将该文本居中在三个底部框中（material-ui 中的纸质组件）

https://codesandbox.io/s/lingering-snowflake-grvxg?file=/src/App.js

【问题讨论】：

我在论文类中添加了justifyContent: center，并使用了排版组件<Typography variant="body2" color="textSecondary" component="p">而不是span，它似乎可以在codesandbox中的单独窗口上工作
@apocalypsenow 请分享链接或给出答案，以便我将其作为问题的正确链接进行检查

标签： css reactjs material-ui

【解决方案1】：

在纸课上试试这个

  paper: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
    verticalAlign: "middle"
    boxShadow: "4px 4px 4px rgba(0, 0, 0, 0.25)",
    borderRadius: "25px",
  },

然后像这样包装你的问题

       <Paper className={classes.paper}>
             <Typography
                // style={{ width: "70%", margin: "auto" }} I think you should avoid break tags instead do something with the width
                variant="body2"
                color="textPrimary"
                component="span"
              >
                What are Tabaani experience standards and requirements?
              </Typography>
            </Paper>

为什么你应该避免中断标签here。这是我的工作示例codesandbox。干杯

【讨论】：