CODEWITHSUNDEEP
material-ui
Malsha Madushani
Malsha Madushani

Reputation: 77

How to center a button in material ui?

Given below is the code which I coded using material ui.I'm still new to that area.I need to center my button.But it comes to the corner.Is there any problem in my code?

                <Button className={clsx(classes.button)} 
                type="submit"
                alignItems="center"
                variant="contained">
                 {'Sign Up'}
                </Button>
                </div>```



button:{
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 8,
    border: 0,
    color: 'white',
    height: 48,
    width: "30%",
    padding: '10px 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    justifyContent: 'center'
  }

alignItems="center" does not work for me.

Upvotes: 0

Views: 321

Answers (2)

David Lin
David Lin

Reputation: 66

 justifyContent: 'center'

You can use justifyContent or AlignItems in

display:flex

mode. Otherwise you can use text-align: center or margin: auto to make your child element center.

Upvotes: 0

Malsha Madushani
Malsha Madushani

Reputation: 77

paper: {

textAlign: 'center',
color: theme.palette.text.secondary,

},

I enabled textAlign: 'center' and It fixed

Upvotes: 0

Related Questions