How to Center a Button in Material-Ui

MUI buttons won't center

Change from space-between to center if you want to center align your buttons. You can play around in the interactive example here to know more about different values of justify-content.

justifyContent="center"

EDIT: The flexbox is a container, you need to put it outside and place all of your buttons inside it, You can also use Stack in v5, it's essentially a Box with the display set the flex:

<Stack
  justifyContent="center"
  gap={2}
  flexDirection="row"
  width={1.0}
  flexWrap="wrap"
>
  {mapButtons}
</Stack>

In material UI, how do I center a Button in the middle of my Grid item?

Grid takes in justify and alignItems as a prop which you can pass to center your content

 <Grid item className={classes.halfRow}>
    <Button size="medium" onClick={startMission} className={classes.center}>
      <Grid container direction="row" spacing={1} alignItems={'center'} justify={'center' }style={{ width: "100%" }}>
        <Grid item>
          <PlayCircleFilledIcon />
        </Grid>
        <Grid item>START</Grid>
      </Grid>
    </Button>
  </Grid>

Centering Buttons in Material-UI and React

The Button variant you are using is the varian="outlined" which has a transparent background. So when is positioned above the dashed border they are shown behind it. In this case if you wan to keep this style of Button you have to add a background-colour of white to it.
Another option would be to use the contained variant like below but this would change the style of the button.

<Button variant="contained">
  Hello there
</Button>

UPDATED:

or (for any reason you don't want to add the background colour to the button) you can add using :after or :before at the button, an element that will be behind the button and hide the dashed border. As a solution is not optimal as this will not work for dynamic backgrounds, or if they have an image or even a gradient color.

        <Button
          variant="outlined"
          sx={{
            position: "relative",
            zIndex: "1",
            "&:before": {
              content: `''`,
              background: "white",
              width: "100%",
              height: "10px",
              position: "absolute",
              zIndex: "-1"
            }
          }}
        >
          Hello There
        </Button>

I cannot center the Button component in Material-UI using Styled Components

It works using styled component here is the code

import React from 'react';
import Button from "react-bootstrap/es/Button";
import styled from 'styled-components';

const Container = styled.div`
 text-align: center;
`;

class Landing extends React.Component {
    render() {
        return (
          <Container>
            <div>
                <Button color="primary">
                    I am a button
                </Button>
            </div>
          </Container>
    )};
};

You have to wrap the styled component which you have taken. Here I've taken container and then inside the container, I've added the needed CSS.

For more information and usage about the styled component, you can visit this URL - https://www.styled-components.com/docs/basics

Thanks

How to center a ButtonGroup using Material UI?

Just found out that you can use Box component as a container with all the properties of a div container in css (At least the necesary ones)

<Box 
    display="flex" 
    flexDirection="column"
    alignItems="center"
    justifyContent="center"
>
    <ButtonGroup style={{textAlign:"center"}} color="primary" aria-label="outlined primary button group">
        <Button onClick={()=>{setDonation(1)}}>$1</Button>
        <Button onClick={()=>{setDonation(5)}}>$5</Button>
        <Button onClick={()=>{setDonation(10)}}>$10</Button>
        <Button onClick={()=>{setDonation(25)}}>$25</Button>
    </ButtonGroup>
</Box>

Material UI: How to vertically centre align an icon button?

You can easily use Box component and flexbox.

<Box
  display="flex"
  alignItems="center"
>
  <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>
</Box>

It supports all system properties.

Material-UI center button text ignoring icons

It's possible to move the icons into the inner html of the button and tweak the margins respectively. It's kind of hacky but solves your problem. I forked your demo with the updates: https://codesandbox.io/s/material-demo-forked-xmltd?file=/demo.js

  <Button variant="contained" color="secondary" className={classes.button}>
    <KeyboardArrowLeftIcon style={{ marginLeft: -28 }} />
    Back
  </Button>
  <Button variant="contained" color="primary" className={classes.button}>
    Forward
    <KeyboardArrowRightIcon style={{ marginRight: -28 }} />
  </Button>

You can get the same effect while still using startIcon and endIcon by customizing the styles for the start/end icons using withStyles and then using the resulting customized component:

const CenteredTextButton = withStyles({
  startIcon: {
    marginLeft: -28
  },
  endIcon: {
    marginRight: -28
  }
})(Button);

---

Related Topics