title: How do I vertically align my items in a material-UI Grid row?
body: <p>I'm using Material UI's Grid component to display three items in a row.  I would like to vertically align the items to the center, but I'm having a disappointingly challenging time doing this.  Evidently "justifyContent: 'center'," only horizontally centers items.  I discovered this</p>
  
  <pre><code>const styles = (theme) =&gt; ({
    root: {
      textAlign: "left",
      margin: theme.spacing(2),
      paddingBottom: theme.spacing(1),
      color: theme.color.secondary,
    },
    cardHeader: {
      paddingBottom: theme.spacing(0),
    },
    cardContent: {
      width: "100%",
      paddingBottom: theme.spacing(1),
    },
    rowBody: {
      width: "100%",
      flexWrap: "nowrap",
      alignItems: "center",
      justifyContent: 'center',
    },
  ...
        &lt;CardContent className={classes.cardContent}&gt;
          &lt;Grid container className={classes.rowBody} spacing={1}&gt;
            &lt;Grid item&gt;
              &lt;img height="20" src={require('../../img/apple.svg')} alt="" /&gt;
            &lt;/Grid&gt;
            &lt;Grid item&gt;
              {title}
            &lt;/Grid&gt;
            &lt;Grid item className={classes.infoIcon}&gt;
              &lt;InfoIcon /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p>produces the below.</p>
  
  <p><a href="https://i.stack.imgur.com/TXTCt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TXTCt.png" alt="enter image description here"></a></p>
  
  <p>How can I vertically align my items without horizontally aligning them?</p>