使用自动边距使文本框居中答案

【问题标题】：centering the text box using margin auto使用自动边距使文本框居中
【发布时间】：2019-11-13 12:06:52
【问题描述】：

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

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

【问题讨论】：

为什么不对内容容器使用 flexbox 或网格布局？我相信这会变得更简单。

标签： javascript html css material-ui

【解决方案1】：

见this sandbox。

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

【讨论】：

【解决方案2】：

使用 class '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",
  }

【讨论】：

【解决方案3】：

您可以使用 flexbox 使元素居中。除了使用 marginLeft 和 marginRight auto 你可以使用这个代码

搜索：{ 显示：“弹性”，证明内容：“中心” }

这将使您的元素居中

【讨论】：