office fabric Document card css

hi i am using office fabric UI to show Document card as Tiles below is my code i want icon should come at center and text at bottom in Yellow bar

    const cardStyles: IDocumentCardStyles  = {
  root: [
    {
      display: 'inline-block', marginRight: 20,  marginBottom: 20,width: 60,
backgroundColor:"white", outline:'none',borderStyle:'solid',border:0,borderColor:'#fbce07',textAlign: "center" ,color:"white",borderWidth:"thin",
selectors: {
   ':hover': {
     backgroundColor:'#fbce07' ,outline:'none',borderColor:'#fbce07'
   },
  ':after': {
    color: 'transparent',
    content: '',
    display: 'block',
    height: '1px',
    overflow: 'hidden',
    visibility: 'hidden'
  },
  ':before': {
    color: 'transparent',
    content: '',
    display: 'block',
    height: '1px',
    overflow: 'hidden',
    visibility: 'hidden'
  },

}
    }
  ]
};

const conversationTileClass = mergeStyles({ height: 90 }); 
  <DocumentCard
    aria-label={
      'Document Card with logo, text preview, and status. Conversation about annual report. ' +
      'Content preview. 3 attachments. Sent by Annie Lindqvist and 2 others in March 13, 2018.'
    }
    styles={cardStyles}
    onClick={this._OpenPanel}
  >
    <DocumentCardLogo {...logoProps}  />
    <div className={conversationTileClass}>
      <DocumentCardTitle
        title={
          'Secuirty'
        }
        shouldTruncate
        showAsSecondaryTitle
      />
    </div>
   
  </DocumentCard>

which give me below look

But i want a design like below

<div className={styles.icon}>
    <DocumentCardLogo {...logoProps}  />
    <div className={conversationTileClass }>
    
      <DocumentCardTitle
        title={
          'Secuirty'
        }
        shouldTruncate
        showAsSecondaryTitle
      />
    </div>
    </div>

.icon{
    margin:0 auto
  }