javascript - 使用自动边距使文本框居中

Question

• 我正在尝试使搜索框居中。
• 所以我给了 marginLeft: "auto",marginRight: "auto", 类搜索
• 但它没有居中。
• 你能告诉我如何解决它。
• 在下面提供我的代码片段和沙箱。

https://codesandbox.io/s/material-demo-xu3ld

search: {
    marginLeft: "auto",
    marginRight: "auto",
    textAlign: "center"
  }

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

  return (
    <div className={classes.search}>
      <Paper className={classes.root}>
        <IconButton className={classes.iconButton} aria-label="Menu">
          <MenuIcon />
        </IconButton>
        <InputBase
          className={classes.input}
          placeholder="Search Google Maps"
          inputProps={{ "aria-label": "Search Google Maps" }}
        />
        <IconButton className={classes.iconButton} aria-label="Search">
          <SearchIcon />
        </IconButton>
        <Divider className={classes.divider} />
        <IconButton
          color="primary"
          className={classes.iconButton}
          aria-label="Directions"
        >
          <DirectionsIcon />
        </IconButton>
      </Paper>
    </div>
  );
}

标签： javascripthtmlcssmaterial-ui

Answer 1

使用类 'wrapper' 将您的搜索包装在另一个 div 中

<div className={classes.wrapper}>
      <div className={classes.search}>
        <Paper className={classes.root}>
          <IconButton className={classes.iconButton} aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <InputBase
            className={classes.input}
            placeholder="Search Google Maps"
            inputProps={{ "aria-label": "Search Google Maps" }}
          />
          <IconButton className={classes.iconButton} aria-label="Search">
            <SearchIcon />
          </IconButton>
          <Divider className={classes.divider} />
          <IconButton
            color="primary"
            className={classes.iconButton}
            aria-label="Directions"
          >
            <DirectionsIcon />
          </IconButton>
        </Paper>
      </div>
    </div>

并对您的 css 进行以下更改。

  search: {
    textAlign: "center",
    display: "inline-block"
  },
  wrapper: {
    textAlign: "center",
  }