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

Question

I have been trying to center text inside paper component in material ui and currently nothing works. I tried to use display:flex in parent component and align-items:center in child component, and I tried to use padding:5px to get equal padding and it didn't work, and absolutely tried text-align and vertical-align and all didn't work here's what it currently looks like:

I am trying to center that text in the three bottom boxes(paper components in material-ui)

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

Answer 1

Try this for the paper class

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

and wrap your questions like so

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

why you should avoid break tags here . And this is my working example codesandbox . Cheers