如何在Material-UI按钮中让文本居中且不受图标影响？

要实现文本完全居中、图标不干扰居中布局的效果，核心思路是把图标绝对定位，让它们脱离按钮的正常文档流，这样按钮的文本就能基于按钮本身的宽度居中，不会被图标占据的空间偏移。

下面是修改后的完整代码，我会在注释里说明关键调整：

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";

const useStyles = makeStyles((theme) => ({
  button: {
    width: "100%",
    marginBottom: theme.spacing(1),
    marginTop: theme.spacing(1),
    // 按钮设置相对定位，作为图标的定位参考
    position: "relative",
    // 左右预留padding，避免文本和图标重叠
    paddingLeft: theme.spacing(4),
    paddingRight: theme.spacing(4),
  },
  // 通用图标容器样式，绝对定位实现垂直居中
  iconContainer: {
    position: "absolute",
    top: "50%",
    transform: "translateY(-50%)",
  },
  // 左侧图标：固定到按钮左边缘
  startIcon: {
    ...theme.typography.button,
    left: theme.spacing(1),
  },
  // 右侧图标：固定到按钮右边缘
  endIcon: {
    ...theme.typography.button,
    right: theme.spacing(1),
  },
}));

export default function IconLabelButtons() {
  const classes = useStyles();

  return (
    <div>
      <Button variant="contained" color="secondary" className={classes.button}>
        {/* 手动添加左侧图标并应用自定义定位样式 */}
        <KeyboardArrowLeftIcon className={`${classes.iconContainer} ${classes.startIcon}`} />
        Back
      </Button>
      
      <Button variant="contained" color="primary" className={classes.button}>
        Forward
        {/* 手动添加右侧图标并应用自定义定位样式 */}
        <KeyboardArrowRightIcon className={`${classes.iconContainer} ${classes.endIcon}`} />
      </Button>
      
      {/* 用于对比的无图标按钮 */}
      <Button variant="contained" color="secondary" className={classes.button}>
        Back
      </Button>
      
      <Button variant="contained" color="primary" className={classes.button}>
        Forward
      </Button>
    </div>
  );
}

关键调整说明： #

1. 按钮设置相对定位：给.button添加position: relative，让绝对定位的图标能以按钮为参考点进行位置固定。
2. 图标脱离文档流：通过.iconContainer的绝对定位，让图标不再占据按钮布局的空间，文本就能基于按钮整体宽度居中。
3. 垂直居中图标：top:50% + transform: translateY(-50%)确保图标在按钮内垂直居中，和文本保持视觉对齐。
4. 避免文本与图标重叠：按钮的左右padding预留出图标空间，保证文本和图标不会相互遮挡。
5. 弃用默认图标属性：不再使用Button自带的startIcon/endIcon，而是手动插入图标并应用自定义样式，避开默认flex布局对文本居中的干扰。

修改后，带图标的按钮文本会和无图标按钮完全对齐居中，图标则固定在按钮的前后位置，完全不会影响文本的居中计算。

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