Search code examples
layoutmaterial-uistackalignment

material ui stack center and right top

I try to make such layout with Material UI (V5):

enter image description here

I tested Stack and Grid but cannot align both the button in the center and the left text on the top right. Any suggestions?

Mark

Solution

  • Have a look at the code below and this working codesandbox

    You can create a Grid with 3 fragments in a row leaving empty the first one and giving it the same column width property as the last one (in this case sx={1} just as an example).

    import * as React from "react";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";

export default function FullWidthGrid() {
  return (
    <Grid container direction="row" sx={{ background: "grey" }}>
      <Grid item xs={1} />
      <Grid container xs={10} justifyContent="center">
        <Button variant="contained">Contained</Button>
      </Grid>
      <Grid item xs={1}>
        TextX
      </Grid>
    </Grid>
  );
}

    I would suggest to study the Grid MUI V5 as it gives you much flexibility so understanding it would save you more time in the future.

    Another solution would be to have a wrapper <div> component for example, with position: relative and inside it to have a Typography component with align="center" and another <span>TextX</span> with position: absolute and position it on the top right.