javascript - 使用 margin auto 使文本框居中

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>
  );
}

Answer 1

参见 this sandbox .

如果您查看为您的示例生成的 HTML，您将看到您将 search 类放在的 div 是居中的，但实际的搜索元素位于div 未居中。