Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center a button in Material-UI

Tags:

I couldn't figure out how to center buttons in Material-UI. This is the code I have:

function BigCard(props) {     const { classes } = props;     return (     <div>         <Card className={classes.card}>         <CardContent>             <Typography variant="display1" className={classes.title}>             Start Funding!             </Typography>         </CardContent>         <CardActions >             <Button size="small" color="primary" className={classes.actions}>             Share             </Button>             <Button size="small" color="primary">             Learn More             </Button>         </CardActions>       </Card>     </div>   ); 

How can I center my button?

like image 357
aspiringsomeone Avatar asked Jun 24 '18 13:06

aspiringsomeone


People also ask

How do I center a button in material UI?

To center a button in React Material UI, we can put the button in a Grid component. And we set the justify prop of the Grid to 'center' and we set the container prop to true . to add the Grid prop with the container and justify props. We set justify to 'center' to center the items inside.

How do I center a button in bootstrap react?

Answer: Use the text-center Class You can simply use the built-in class . text-center on the wrapper element to center align buttons or other inline elements in Bootstrap.


2 Answers

You can use Box element

<Box textAlign='center'>   <Button variant='contained'>      My button   </Button> </Box> 
like image 56
Said Kholov Avatar answered Oct 20 '22 08:10

Said Kholov


you could use the override with classes in the material ui doc,

FIRST WAY

You can do something like :

//Add your justify css in your styles const const styles = {     ...     root: {         justifyContent: 'center'     } }; 

And use the classes props to add this to your CardActions component :

 <CardActions classes={{root: classes.root}}> 

SECOND WAY (easier)

OR You can use the style directly on your component, but i advise you to train how to use classes if you're working alot with material-ui

Just do something like :

<CardActions style={{justifyContent: 'center'}}> 
like image 27
Duncan Roze Avatar answered Oct 20 '22 09:10

Duncan Roze