Центральный компонент внутри material-ui grid

#javascript #css #reactjs #material-ui

Вопрос:

Я хочу использовать одинаковые карточки и выровнять их по центру, я искал и пробовал некоторые решения, но все они выравнивают только сетку компонента, а не само содержимое компонента (мне нужно, чтобы они были одинаково удалены от границ и от самих себя).

Я использую этот код (https://codesandbox.io/embed/32o8j4wy2q ):

 <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: '80vh' }}>
      <Grid container item xs={12} spacing={8}>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
      </Grid>
    </Grid>

Код карты не имеет значения, но я просто скопировал пример material-ui.

Кроме того, как мне использовать flexboxes (или другой инструмент) для автоматического выравнивания, если я решу в будущем добавить или удалить некоторые карты?

1. вы пытались удалить «внутренний контейнер»? или переместить alignItems и justify к нему?

2. @Maielo Я перепробовал все это. Я создал CodeSandbox для облегчения визуализации и тестов codesandbox.io/embed/32o8j4wy2q

3. Я бы добавил margin: auto к внутренней div оболочке содержимого. Я не смог разветвить вашу демонстрацию, но, похоже , добавление этого в CSS сработало: div[class^='MuiGrid-item-'] > div { margin: auto; }

4. @Teknotica Я попробовал это, и у меня это не сработало, я попробовал поместить его внутри элемента grid, а позже и в контейнер. Вы удалили некоторые параметры?

Ответ №1:

Я улучшил это, добавив align="center" в код JSX, что означает align-items: center в CSS, как описано здесь.

Код был выполнен следующим образом:

   <Fragment>
    <Grid
      container
      spacing={24}
      justify="center"
      style={{ minHeight: '100vh', maxWidth: '100%' }}
      >
     <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
    </Grid>
  </Fragment>

1. Я получил странный результат с этим. Это работает, но затем приложение выходит из строя и сообщает мне, что для этого вызова нет перегрузки. Вы делали что-нибудь еще, кроме добавления этого?

2. Этот метод может привести к ошибке, когда для компонента grid нет перегрузки, в этом случае вы можете поместить контейнер Grid с alignItems=»center», как предложил @Invaraid.

Ответ №2:

align Реквизит для grid больше не существует. Мы можем создавать с Grid и Box

 <Grid container>
  <Grid xs={8} item>
    <Box
      height="100%"
      display="flex"
      justifyContent="center"
      flexDirection="column"
    >
      Content with smaller height
    </Box>
  </Grid>
  <Grid xs={4} item>
    Content with bigger height
  </Grid>
</Grid>

Ответ №3:

Принятый ответ у меня не сработал, я получил сообщение об ошибке, указывающее, что для grid не было перегрузки с помощью параметра Align. Вместо этого я поместил компонент, который хотел выровнять по центру, в контейнер Grid с помощью justify="center" и alignItems="center" .

Итак, в примере OPs это будет выглядеть так:

 <Fragment>
<Grid
  container
  spacing={24}
  justify="center"
  style={{ minHeight: '100vh', maxWidth: '100%' }}
  >
    <Grid item xs={3} align="center">
       <Grid container justify="center" alignItems="center">
          <Card />
       </Grid>
    </Grid>
</Grid>

Ответ №4:

Чтобы выровнять содержимое элемента сетки по его центру

 <Grid container>
  <Grid xs={8} item
      display="flex"
      justifyContent="center"
      flexDirection="column">
    <Box>
      Content with smaller height
    </Box>
  </Grid>
  <Grid xs={4} item>
    Content with bigger height
  </Grid>
</Grid>