CODEWITHSUNDEEP
reactjsmaterial-ui
Mens Rifles
Mens Rifles

Reputation: 1359

Vertical align using Material UI Paper

I want to vertically align some text in a Material UI Paper component.

The code is here.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
    height: 200,
    verticalAlign: 'middle'
  },
}));

function PaperSheet() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          This is a sheet of paper.
        </Typography>
        <Typography component="p">
          Paper can be used to build surface or other elements for your application.
        </Typography>
      </Paper>
    </div>
  );
}

export default PaperSheet;

Upvotes: 23

Views: 83903

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81763

You can use Stack in MUI v5. Set the direction to column and justifyContent to center to center align the content inside the Card:

<Paper component={Stack} direction="column" justifyContent="center">
  <div>
    This content is vertically aligned
  </div>
</Paper>

Live Demo

Codesandbox Demo

Upvotes: 5

Arnaud Christ
Arnaud Christ

Reputation: 3551

vertical-align CSS property only works with display: block element.

An option for you could be to declare your root class using flexbox:

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
    height: 200,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  },
}));

Upvotes: 32

Related Questions