css - 如何对齐 React 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