центрирование текстового поля с помощью поля 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

Оберните ваш поиск в другом div с помощью класса 'wrapper'

<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",
  }

Answer 2

Вы можете использовать flexbox для центрирования элемента.Вместо использования marginLeft и marginRight auto вы можете использовать этот код

search: {display: "flex", justifyContent: "center"}

, который будет центрировать ваш элемент

Answer 3

См. эту песочницу .

Если вы посмотрите на сгенерированный HTML для вашего примера, вы увидите, что div, в котором вы ставите класс search в центрированном IS,но фактический элемент поиска внутри элемента div НЕ центрирован.