フレックスボックスの中にテキストを配置する方法は？

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

Colの中心にテキストを配置するにはどうすればよいですか？ ありがとう

Answer 1

親のdivは​​を使用できます。

例を参照してください：https://codepen.io/amboy00/pen/GmpoLy