CODEWITHSUNDEEP
cssreactjsbuttonmaterial-uialignment
aspiringsomeone
aspiringsomeone

Reputation: 623

How to center a button in Material-UI

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?

Upvotes: 37

Views: 99482

Answers (13)

fifaltra
fifaltra

Reputation: 375

For me, putting textAlign directly into the button sx-props worked:

 <Button 
    sx={{ textAlign: 'center',}}
    > 
    Click
 </Button>

Upvotes: 0

Yadu
Yadu

Reputation: 3305

wrap element in this center

.center{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

Upvotes: 0

Julio Raffaine
Julio Raffaine

Reputation: 338

This may sound counter-intuitive but what worked for my case (slightly different than yours) was to use the fullWidth attribute in the Button element.

Here is my scenario (MUI v5):

<Grid container alignItems={'center'} >
  <Grid item>
    <Button fullWidth variant='contained' >Click Me!</Button>
  </Grid>
</Grid>

Upvotes: 0

MD SHAYON
MD SHAYON

Reputation: 8055

The easiest way is to use a Box wrapping around the button

 <Box
      sx={{
        display: 'flex',
        flexDirection: { xs: 'column', md: 'row' },
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
        <Button>Click me</Button>
</Box>

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81270

From MUI v5, you can apply the custom styles using the sx props. Because CardActions layout is already flex, you only need to set its justify-content to center.

Using sx instead of inline styles like the other answer help reduce the CSS specificity, and make it easier to override the CSS in the future

<CardActions sx={{ justifyContent: "center" }}>
  <Button size="small">Learn More</Button>
</CardActions>

Live Demo

Edit 51010599/how-to-center-a-button-in-material-ui

Upvotes: 8

L&#233;cio Bourbon
L&#233;cio Bourbon

Reputation: 163

Quick and dirty:

<Button style={{margin: '0 auto', display: "flex"}}>
  NEXT
</Button>

Upvotes: 7

DiaMaBo
DiaMaBo

Reputation: 2287

Here is how I did it with Material - UI

import {Typography, Button} from '@material-ui/core';

 <Typography align='center'>
    <Button
      color='primary'
      size='large'
      type='submit'
      variant='contained'
     >
      Sign Up
    </Button>
  </Typography>

Upvotes: 7

Dancan Angwenyi
Dancan Angwenyi

Reputation: 84

This will centre your button horizontally

 <Button
                size="medium"
                variant="contained"
                color="primary"
                style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent:"center",
                    backgroundColor: purple[500],
                    '&:hover': {
                        backgroundColor: purple[700],
                     },
                }}
                
            >
            Get Hired
       </Button>

Upvotes: 0

Ivan F
Ivan F

Reputation: 21

You have to use two properties: display and justify-content

<CardActions display='flex' justifyContent='center'>

Upvotes: 2

Said Kholov
Said Kholov

Reputation: 2486

You can use Box element

<Box textAlign='center'>
  <Button variant='contained'>
     My button
  </Button>
</Box>

Upvotes: 55

Arsalan Ahmad Ishaq
Arsalan Ahmad Ishaq

Reputation: 977

What I tried is below and is also shown in official videos of material ui on youtube.

<Grid item xs={12} sm={12} md={4} lg={4}
    style={{
        textAlign:'center' // this does the magic
    }}
>
    <Button>
         NEXT
    </Button>
</Grid>

Thanks and best wishes

Upvotes: 4

Karl Casas
Karl Casas

Reputation: 855

For use cases that avoid defining css

<Grid container justify="center">
  {props.children}
</Grid>

Upvotes: 18

Duncan Roze
Duncan Roze

Reputation: 339

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

Upvotes: 32

Related Questions