Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Вертикальное выравнивание Paper в React Material-UI (https://javascript.ru/forum/library-toolkit-framework/77576-vertikalnoe-vyravnivanie-paper-v-react-material-ui.html)

Elfix 22.05.2019 11:50

Вертикальное выравнивание Paper в React Material-UI
 
Приветствую!

Никак не выходит сделать вертикальное выравнивание в компоненте Paper. Нужно чтобы компонент Card центрировался в компоненте Paper и по горизонтали и по вертикали.

Как это делается в material-ui?

<Paper style={{margin: 'auto'}}>
 <Card>
 </Card>
</Paper>

Царь Леонид 23.05.2019 14:23

<Paper
   style={{
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
  }}
  >
 <Card />
</Paper>

Elfix 23.05.2019 14:35

Большое спасибо!

Elfix 03.07.2019 11:41

Приветствую!

Не откажите пожалуйста в помощи по сходному вопросу.
Никак не получается DIV растянуть на всю ширину и на всю высоту родительского элемента в React при использовании material-ui.
Кроме того, нужно чтобы div располагался по центру в том числе по вертикали. Но почему-то он никак не центрируется.

Как это починить?

<Grid container direction="row" justify="center" alignItems="center" >
				<Grid item xs={6}>
					<Card style={{marginRight: 15, height: 450}}>
						<CardContent style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
							<div>
								Этот DIV должен быть растянут на всю площадь родителя.
							</div>
						</CardContent>
					</Card>
				</Grid>
				<Grid item xs={6}>
					<Card style={{height: 450}}>
						<CardContent style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
							<div>
								Этот DIV должен быть растянут на всю площадь родителя.
							</div>
						</CardContent>
					</Card>
				</Grid>
			</Grid>


Часовой пояс GMT +3, время: 09:19.