如何對齊flexbox中的文本？

我使用react-flexbox-grid和我目前的佈局看起來像如何對齊flexbox中的文本？

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;

當我在瀏覽器中查看這一點，我看到的文字是不是在框中