В материальном пользовательском интерфейсе, как мне центрировать кнопку в середине моего элемента сетки? - PullRequest
Новая
       125

В материальном пользовательском интерфейсе, как мне центрировать кнопку в середине моего элемента сетки?

0 голосов
/ 09 мая 2020

Я использую Material UI's Grid с моим приложением React 16.13.0. Я хочу центрировать содержимое кнопки в середине моей строки. Итак, я придумал это

center: {alignItems: "center", width: "100%",}, halfRow: {width: "50%",}, ... 

      <Grid item className={classes.halfRow}>
        <Button size="medium" onClick={startMission} className={classes.center}>
          <Grid container direction="row" spacing={1} style={{ width: "100%", alignItems: "center" }}>
            <Grid item>
              <PlayCircleFilledIcon />
            </Grid>
            <Grid item>START</Grid>
          </Grid>
        </Button>
      </Grid>

Однако это не работает. Кажется, что кнопка выравнивается по левому краю ...

enter image description here

Какой правильный стиль я должен применить, чтобы все было по центру посередине ячейки?

1 Ответ

0 голосов
/ 09 мая 2020

Сетка принимает justify и alignItems как опору , которую вы можете передать для центрирования вашего контента 

 <Grid item className={classes.halfRow}>
    <Button size="medium" onClick={startMission} className={classes.center}>
      <Grid container direction="row" spacing={1} alignItems={'center'} justify={'center' }style={{ width: "100%" }}>
        <Grid item>
          <PlayCircleFilledIcon />
        </Grid>
        <Grid item>START</Grid>
      </Grid>
    </Button>
  </Grid>
...