0
我使用react-flexbox-grid和我目前的布局看起来像如何对齐flexbox中的文本?
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
我能做些什么来对齐在Col
中央的文字menu
分支可用? 谢谢
如果你正在使用'反应,Flexbox的-grid'也许你可以试试['.middle'如文档中指定的(https://roylee0704.github.io/react- Flexbox的网/)? – aug
这不知怎么没有正确对齐项目 – daydreamer