Search code examples
cssreactjsflexboxreact-flexbox-grid

How to align text inside react flexbox?

I am using react-flexbox-grid and my current layout looks like 

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;

When I view this in browser, I see that text is not aligned in the middle of the box enter image description here enter image description here

My code is available in menu branch at https://github.com/hhimanshu/spicyveggie/tree/menu

What can I do to align the text in the center of the Col? Thanks

Solution

  • To center align items, the parent div can use align-items: center;.

    See example: https://codepen.io/amboy00/pen/GmpoLy