MUI - How to align a component to the center/right?

user_1396264 0
Viewed 136334

I want to align my button to the right of the parent.

I was wondering if there is a proper way to do it in MUI. I could use:

<Grid container justify="flex-end">

But then I would have to use another <Grid item />. Seems too much of work.

Or maybe I am just better off using plain old CSS, messing around with float: right and dealing with the apparent zero height of the element.

material-ui reactjs javascript
8 Answers

BEFORE MUI 5:

Try this

<Grid container justify="flex-end">
     <Button>Example</Button>
</Grid>

UPDATE MUI 5: (Thanks to Dipak)

The prop justify of ForwardRef(Grid) is deprecated. Use justifyContent instead, the prop was renamed.

<Grid container justifyContent="flex-end">
     <Button>Example</Button>
</Grid>

Update: The best solution is the answer of NearHuscarl, you'd better use Stack than Grid.

user_38285810

If you would like to align items within the <Grid item> you can use a wrapping Box component as follows:

<Grid container>
  <Grid item sm={6}>
    <Box display="flex" justifyContent="flex-end">
      <Button>Button Aligned To The Right</Button>
    </Box>
  </Grid>
</Grid>

See the docs for more positioning options.

user_14853470

In MUI v5, you can use Stack to display a set of components on a row or a column. Stack is a flexbox so you only need to set the justifyContent prop to align the item inside:

<Stack direction="row" justifyContent="end">
  <Button variant="contained">Item 1</Button>
</Stack>

Codesandbox Demo

user_94494260

If you do not want to use the Grid component, you have to rely on CSS.

But if you use Material-UI you should use JSS (CSS-IN-JS) and not plain CSS.

In CSS you may use any of these solutions for example. "text-align" being the simplest one.

  • text-align: right
  • float: right
  • flexbox
    • parent with : display: flex
    • child with : align-content: flex-end
user_36410750

Use the Box component with flex.

<Box display="flex" flexDirection="column" >
  <... other stuff/>
</Box>

You can learn more here

user_67059480

For Latest material-ui version 5 use justifyContent="flex-end" or alignContent which is equivalent to css text-align and flex-end=right

    <Grid container alignContent="flex-end">
         <Button>Example</Button>
    </Grid>

or
    <Grid item justifyContent="flex-end">
         <Button>Example</Button>
    </Grid>

For old material-ui version 4

    <Grid item justify="flex-end">
         <Button>Example</Button>
    </Grid>
user_62957120 
            <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
                <Typography sx={{ fontWeight: 600 }}>
                    Recent Repositories
                </Typography>
                <Box>
                    {/* <Typography></Typography> */}
                    <Button error>+ New</Button>
                </Box>
            </Toolbar>
user_111854600

Material UI's Grid Component has helper props to achieve this.

<Grid align-items-xs-center justify-xs-flex-end>
 <Button>Click me</Button>
</Grid>

You can find the docs here.

user_45341790
Related