Utilizing react-flexbox-grid in my project has led to the following layout:
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;
Upon viewing this setup in a web browser, it's apparent that the text is not properly aligned within the box. Here are some snapshots for reference:
You can access my code on the menu branch by visiting https://github.com/hhimanshu/spicyveggie/tree/menu
What steps should I take to ensure that the text aligns perfectly at the center of the Col element? Your assistance would be greatly appreciated.