我需要在设置了 minHeigh 属性的网格项中垂直居中文本,here's short codesandbox example of the problem i'm facing , justify, alignItems, 似乎不起作用。
<Grid container className={classes.root}>
<Grid item xs={12}>
<Grid
container
spacing={16}
className={classes.demo}
alignItems={alignItems}
direction={direction}
justify={justify}
>
{[0, 1, 2].map(value => (
<Grid
key={value}
item
style={{
padding: "0 12px",
minHeight: 48,
borderStyle: "solid"
}}
>
{`Cell ${value + 2}`}
</Grid>
))}
</Grid>
</Grid>
当 style={{ minHeight: 48 }}
适用于 <Grid item />
网格项的子项未对齐、对齐、对齐项,对其没有任何影响。
最佳答案
您还需要向该元素添加另外两个属性。
display: inline-flex;
align-items: center;
如果这是你期待的结果
<Grid
container
spacing={16}
className={classes.demo}
alignItems={alignItems}
direction={direction}
justify={justify}
>
{[0, 1, 2].map(value => (
<Grid
key={value}
item
style={{
display: "inline-flex", // <--
alignItems: "center", // <--
padding: "0 12px",
minHeight: 48,
borderStyle: "solid"
}}
>
<p>{`Cell ${value + 2}`}</p>
</Grid>
))}
</Grid>
关于javascript - 在网格元素内垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50906581/