如何对齐 React Flexbox 中的文本?
How to align text inside react flexbox?
我正在使用 react-flexbox-grid,我当前的布局看起来像
const SpicyMenu = (props) => (
<List>
{props.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.name} {...foodItem}/>)}
</List>
);
const SpicyMenuItem = (props) => (
<Grid fluid>
<Row center="lg">
<Col xs={3} sm={3} lg={2}><Avatar src={props.image}/></Col>
<Col xs={6} sm={6} lg={4}>
<Row around="lg">
<Col>{props.name}</Col>
</Row>
</Col>
<Col xs={3} sm={3} lg={2}>
<div>{props.price}</div>
</Col>
</Row>
</Grid>
);
export default SpicyMenu;
当我在浏览器中查看时,我看到文本没有在框的中间对齐
我的代码在 https://github.com/hhimanshu/spicyveggie/tree/menu
的 menu
分支中可用
如何使文本居中对齐 Col
?
谢谢
要居中对齐项目,父级 div 可以使用 align-items: center;
。
我正在使用 react-flexbox-grid,我当前的布局看起来像
const SpicyMenu = (props) => (
<List>
{props.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.name} {...foodItem}/>)}
</List>
);
const SpicyMenuItem = (props) => (
<Grid fluid>
<Row center="lg">
<Col xs={3} sm={3} lg={2}><Avatar src={props.image}/></Col>
<Col xs={6} sm={6} lg={4}>
<Row around="lg">
<Col>{props.name}</Col>
</Row>
</Col>
<Col xs={3} sm={3} lg={2}>
<div>{props.price}</div>
</Col>
</Row>
</Grid>
);
export default SpicyMenu;
当我在浏览器中查看时,我看到文本没有在框的中间对齐
我的代码在 https://github.com/hhimanshu/spicyveggie/tree/menu
的menu
分支中可用
如何使文本居中对齐 Col
?
谢谢
要居中对齐项目,父级 div 可以使用 align-items: center;
。