css - 如何在反应弹性框中对齐文本？

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;

当我在浏览器中查看时，我看到文本在框的中间没有对齐