Блог

Главная - Вопросы по программированию - Пользовательский интерфейс материала не выравнивается по вертикали с его меткой

Пользовательский интерфейс материала не выравнивается по вертикали с его меткой

#reactjs #grid #material-ui #textfield #typography

#reactjs #сетка #материал-пользовательский интерфейс #текстовое поле #типографика

Вопрос:

Я хочу выровнять по вертикали Typography и TextField пользовательский интерфейс материала. Вот мой код

 <Grid container>
    <Grid item xs={12} sm={3}>
        <Typography>1.1 Company Name</Typography>
    </Grid>
    <Grid item xs={12} sm={9}>
        <TextField id="standard-basic" label="Standard"/>
    </Grid>
</Grid>

Вот как это выглядит

введите описание изображения здесь

Кто-нибудь может дать мне решение для этого?

Комментарии:

1. Если вы сможете удалить опору метки, это приведет к тому, что эти два будут больше совпадать друг с другом. Если вы все еще хотите сохранить метку, вам нужно будет работать с CSS напрямую

Ответ №1:

вы можете использовать alignItems="center"

Ответ №2:

В этом случае вы можете применить align-items: flex-end; к контейнеру.

 .MuiGrid-container {
  align-items: flex-end;
}

Также внесите изменения в шаблон:-

 <Grid container>
      <Grid item xs={12} sm={4}>
        <Typography>1.1 Company Name</Typography>
      </Grid>
      <Grid item xs={12} sm={8}>
        <TextField id="standard-basic" label="Standard" />
      </Grid>
    </Grid>

Рабочий код — https://codesandbox.io/s/funny-vaughan-kktty?file=/src/styles.css

введите описание изображения здесь