Material UI高级按钮：小屏幕尺寸下的文本对齐问题

Hey Dan! Let's break down what's causing your text alignment issue on small screens and get those buttons looking polished across all breakpoints.

What's Going Wrong? #

Looking at your code, a few Flex layout and container settings are throwing off the text alignment on small screens:

1. The Image styled component uses justifyContent: 'space-between' — this pushes content to the edges of the container, which works fine on wide screens but makes text stick to the left when buttons stack full-width on small screens.
2. The wrapping Box has minWidth: 900, which forces the container to stay wide even on small devices, causing horizontal overflow and misaligned text.
3. The Typography has a fixed p: "7em" padding, which adds excessive horizontal space on small screens and pushes text out of place.

The Fix #

Here's the adjusted code with key changes to center the text properly:

import React from 'react'
import { AppBar, Toolbar } from "@mui/material";
import { makeStyles } from '@mui/styles'
import Button from '@mui/material/Button'
import Stack from '@mui/material/Stack'
import ButtonBase from '@mui/material/ButtonBase';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

const useStyles = makeStyles(theme => ({
  button: {
    ...theme.typography.mainmenu,
    borderRadius: "40px",
    marginLeft: "1px",
    height: "45px",
    "&:hover": {
      backgroundColor: theme.palette.secondary
    }
  },
}))

const images = [
  { url: '/assets/breakfastMenu.jpg', title: 'Breakfast', width: '33.33%', },
  { url: '/assets/steak.jpg', title: 'Mains', width: '33.33%', },
  { url: '/assets/desserts.jpg', title: 'Desserts', width: '33.33%', },
];

// Changed justifyContent to center here
const Image = styled('span')(({ theme }) => ({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center', // This centers the text horizontally
  color: theme.palette.common.primary,
}));

const ImageButton = styled(ButtonBase)(({ theme }) => ({
  position: 'relative',
  height: 150,
  [theme.breakpoints.down('sm')]: {
    width: '100% !important',
    height: 100,
  },
  '&:hover, &.Mui-focusVisible': {
    zIndex: 1,
    '& .MuiImageBackdrop-root': {
      opacity: 0.15,
    },
    '& .MuiImageMarked-root': {
      opacity: 0,
    },
    '& .MuiTypography-root': {
      border: '4px solid currentColor',
    },
  },
}));

const ImageSrc = styled('span')({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  backgroundSize: 'cover',
  backgroundPosition: 'center 40%',
});

const ImageBackdrop = styled('span')(({ theme }) => ({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  backgroundColor: theme.palette.common.black,
  opacity: 0.4,
  transition: theme.transitions.create('opacity'),
}));

const ImageMarked = styled('span')(({ theme }) => ({
  height: 3,
  width: 18,
  backgroundColor: theme.palette.common.white,
  position: 'absolute',
  bottom: -2,
  left: 'calc(50% - 9px)',
  transition: theme.transitions.create('opacity'),
}));

const Header = () => {
  const classes = useStyles();
  return(
    <React.Fragment>
      <AppBar position="sticky" className={classes.appBar}>
        <Toolbar disableGutters className={classes.mainToolbar} sx={{ justifyContent: "center" }}>
          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={10}>
            {/* Removed minWidth:900 and adjusted flex settings */}
            <Box sx={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
              {images.map((image) => (
                <ImageButton focusRipple key={image.title} style={{ width: image.width, }} >
                  <ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
                  <ImageBackdrop className="MuiImageBackdrop-root" />
                  <Image>
                    {/* Updated padding to be responsive instead of fixed 7em */}
                    <Typography 
                      component="span" 
                      variant="subtitle1" 
                      color="white" 
                      fontWeight="bold"
                      sx={{ 
                        position: 'relative', 
                        p: { xs: '1em', md: '7em' }, // Responsive padding
                        pt: "2em", 
                        pb: (theme) => `calc(${theme.spacing(1)} + 6px)`, 
                      }}
                    >
                      {image.title}
                      <ImageMarked className="MuiImageMarked-root" />
                    </Typography>
                  </Image>
                </ImageButton>
              ))}
            </Box>
          </Stack>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  )
}

export default Header

Key Changes Explained #

• Image Component: Changed justifyContent: 'space-between' to justifyContent: 'center' — this ensures the text stays horizontally centered regardless of the button width.
• Wrapping Box: Removed minWidth: 900 to let the container shrink properly on small screens, preventing overflow and alignment issues.
• Typography Padding: Switched from fixed p: "7em" to responsive padding p: { xs: '1em', md: '7em' } — this keeps padding appropriate for both small and large screens, so text doesn't get pushed out of bounds.

These tweaks should make your button text stay centered perfectly across all breakpoints, while keeping your Flex layout clean and intentional.

内容的提问来源于stack exchange，提问作者Dan