Как повернуть метку горизонтального центра в пользовательском интерфейсе материала в сетке? - PullRequest
Новая
       36

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

0 голосов
/ 01 марта 2019

Я пытаюсь сделать мой label по горизонтали center в пользовательском интерфейсе материала с использованием GRID API.

Не могли бы вы рассказать, как мне этого добиться

https://codesandbox.io/s/007k3v472w

 <div className="search-container">
          <Grid container direction="row" spacing={24}>
            <Grid item xs={6} className="abc">
              <label>h</label>
            </Grid>
            <Grid item xs={6} className="pqr">
              <label>hnnn</label>
            </Grid>
          </Grid>
        </div>

https://material -ui.com / api / grid / Я уже использую alignItems, но он не работает

E ожидается от h иhnnn должен быть горизонтально относительно их ширины. в настоящее время они выровнены по левому краю

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Все, что вам нужно сделать, добавить атрибут контейнера к каждому элементу сетки и применить alignItem, чтобы сделать его центром.

Ваш код должен выглядеть примерно так: 

<Grid container direction="row" spacing={24}>
  <Grid item xs={6} 
    container
    direction="column"
    justify="center"
    alignItems="center"
    className="abc">
     <label>h</label>
  </Grid>
  <Grid item xs={6} 
    container
    direction="column"
    justify="center"
    alignItems="center"
    className="pqr">
     <label>hnnn</label>
  </Grid>
</Grid>

Позвольте мнезнаю, поможет ли это!

0 голосов
/ 01 марта 2019

Если вы определили свой класс как abc, удалите элемент, замените его контейнером и добавьте justify = "center"

Чтобы сделать это с помощью CSS, используйте text-align: center

...