如何对齐flexbox中的文本？

Question

我正在使用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的中心对齐文字？ 感谢

Answer 1

要居中对齐项目，父div可以使用align-items: center;。

参见示例：https://codepen.io/amboy00/pen/GmpoLy