Aligning in CSS and Material UI in React

Question

How do I align one button to the left while the other two on the center?

Pls check codesandbox here CLICK HERE

    <DialogActions sx={{ justifyContent: "center" }}>
      <Button>Left</Button>
      <Button onClick={handleClose}>Cancel center</Button>
      <Button onClick={handleClose}>Subscribe center</Button>
    </DialogActions>

0xKevin · Accepted Answer · 2022-09-14 01:52:54Z

1

You can achieve that using Grid. Check out below codes.

<DialogActions
  sx={{
    display: "grid",
    gridTemplateColumns: "1fr repeat(2, auto) 1fr",
    justifyContent: "center"
  }}
>
  <Button sx={{ marginRight: "auto" }}>Left</Button>
  <Button onClick={handleClose}>Cancel center</Button>
  <Button onClick={handleClose}>Subscribe center</Button>
</DialogActions>

answered Sep 14, 2022 at 1:52

0xKevin

1,0671 gold badge11 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Aligning in CSS and Material UI in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related