CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Vedant Agarwala
Vedant Agarwala

Reputation: 18819

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

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.

Upvotes: 99

Views: 253921

Answers (9)

NearHuscarl
NearHuscarl

Reputation: 81663

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>

Codesandbox Demo

Upvotes: 18

t0mpl
t0mpl

Reputation: 5025

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.

Upvotes: 150

til
til

Reputation: 1215

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

Upvotes: 0

Sailist
Sailist

Reputation: 164

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

Upvotes: 2

Cepheus
Cepheus

Reputation: 4913

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.

Upvotes: 52

Hassan Saeed
Hassan Saeed

Reputation: 7130

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>

Upvotes: 1

Eduardo Oviedo Blanco
Eduardo Oviedo Blanco

Reputation: 455

Use the Box component with flex.

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

You can learn more here

Upvotes: 4

eskawl
eskawl

Reputation: 637

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.

Upvotes: -3

Ricovitch
Ricovitch

Reputation: 2348

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

Upvotes: 3

Related Questions