How to align a component to the center/right with Material UI?

Question

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 Material UI. I could use:

<Grid container justify="flex-end">

But then I would have to use another <Grid item />. Seems like too much 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.

score 126 · Accepted Answer · edited May 18 '23 at 23:50

126

BEFORE Material UI 5:

Try this

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

UPDATE Material UI 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 solutions are the answers of NearHuscarl or Eduardo Oviedo Blanco, you'd rather use Stack or Box than Grid.

edited May 18 '23 at 23:50

Olivier Tassinari

8,238
4
23
23

answered Jan 22 '19 at 17:15

ThomasP1988

4,597
3
30
36

3

What if there are two Grid items inside container Grid and I want to align only second one right? – Imran Ahmad Apr 21 '21 at 19:17
12

then you transform your item into a container (a grid can be both) so your item would be something like : – ThomasP1988 Apr 22 '21 at 07:20
5

Adding `` worked for me. Had to use `justifyContent` – Prakhar Feb 03 '22 at 22:47

score 43 · Answer 2 · answered Dec 23 '21 at 08:00

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.

score 13 · Answer 3 · edited May 18 '23 at 23:51

13

In Material UI 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>

edited May 18 '23 at 23:51

Olivier Tassinari

8,238
4
23
23

answered Oct 21 '21 at 16:14

NearHuscarl

66,950
18
261
230

score 3 · Answer 4 · answered Aug 04 '18 at 16:12

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.

Introduction : https://material-ui.com/customization/css-in-js/
Benefits : http://cssinjs.org/benefits

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

score 2 · Answer 5 · answered Oct 26 '20 at 05:16

2

Use the Box component with flex.

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

You can learn more here

answered Oct 26 '20 at 05:16

Eduardo Oviedo Blanco

357
3
11

score 2 · Answer 6 · answered Apr 06 '22 at 15:12

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

Hassan Saeed · Answer 7 · 2021-10-27T18:30:32.053

1

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>

edited Oct 27 '21 at 18:30

answered Jul 07 '21 at 17:48

Hassan Saeed

6,326
1
39
37

With `v4.11.4` only `` works. Your examples don't work for me. – aemaem Jul 23 '21 at 16:10
Thanks, it is working for me and save my time. – sms247 Aug 03 '21 at 09:27
Instead of "Latest" [at the time of writing] and "old" can you specify versions? – nafg Oct 26 '21 at 00:15

score 0 · Answer 8 · answered Mar 23 '23 at 11:47

0

As this question is not specified towards Grid, here a more general answer:

there are other components for which the parameters need to be provided in an sx.

<Toolbar sx={{ justifyContent: 'flex-end' }}>

answered Mar 23 '23 at 11:47

til

832
11
27

score -3 · Answer 9 · answered Aug 04 '18 at 17:05

-3

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.

answered Aug 04 '18 at 17:05

eskawl

587
1
4
17

3

probably in older version, and does not answer the question – Hugo Gresse Sep 03 '19 at 11:30

How to align a component to the center/right with Material UI?

9 Answers9

BEFORE Material UI 5:

UPDATE Material UI 5: (Thanks to Dipak)

Update: The best solutions are the answers of NearHuscarl or Eduardo Oviedo Blanco, you'd rather use Stack or Box than Grid.

Linked