Próbuję zrobić mój label w poziomie center w materialnym interfejsie interfejsu użytkownika za pomocą API Grid.

Czy mógłbyś mi powiedzieć, jak to osiągnąć

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/ Już używam alignItems, ale nie działa

E spodziewany out h i hnnn powinien być w środku ich szerokości poziomo. Obecnie są wyrównane

0
user944513 1 marzec 2019, 19:09

2 odpowiedzi

Najlepsza odpowiedź

Wszystko, co musisz dodać atrybut kontenera do każdej pozycji siatki i zastosuj Aligitem, aby to zrobić centrum.

Twój kod powinien wyglądać w ten sposób,

<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>

Daj mi znać, jeśli to pomoże!

0
will92 1 marzec 2019, 17:21

Gdzie zdefiniowałeś swoją klasę jako ABC Usuń element i zastąp go z kontenerem i dodaj JUSTIIF = "CENTER"

Aby to zrobić z CSS Użyj tekstu: Centrum

0
Khaladin 1 marzec 2019, 16:41