Question

我正在尝试使搜索框居中。
所以我给class search提供了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，则会看到将div类放在search上是IS居中，但是div中的实际搜索元素未居中。

Answer 2

使用“包装器”类将搜索结果包装在另一个div中

$this->faker->cellPhoneNumber

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

<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>

Answer 3

您可以使用flexbox将元素居中。代替使用marginLeft和marginRight auto，您可以使用此代码

搜索：{ 显示：“ flex”， justifyContent：“中心” }

这将使您的元素居中

使用margin auto将文本框居中

3 个答案: