如何在表格行/材质UI中间设置图像和段落

Question

我使用素材UI制作了一张桌子。我在同一行添加了图片和段落。问题是它们都没有在同一高度对齐。 它们应该显示在行的中间。

目前的观点如下。 主卡Logo与“万事达卡”的高度不匹配..

这是我的表格代码。

 <TableRow className="tableRow">
  <TableRowColumn className="tableOne">{this.props.payment=="PayPal"? 
  <div className="failSample"> <img src={Fail} alt="Fail" className="Fail"/></div> : <div className="checkSample"><img src={Check} alt="Check" className="Check"/></div> }</TableRowColumn>
  <TableRowColumn className="tableTwo">{this.props.date}
  </TableRowColumn>
  <TableRowColumn className="tableThree">{this.props.payment=="Visa" ? <div><div className="visaSample"><img src={Visa} alt="Visa" className="Visa"/></div> </div>:  (this.props.payment=="PayPal" ?   <div className="paypalSample"><img src={Paypal} alt="Paypal" className="Master"/></div> :  <div className="masterSample"> <img src={Master} alt="Master" className="Master"/></div>)}          
     &nbsp; &nbsp;  &nbsp;  {this.props.payment}</TableRowColumn>
  <TableRowColumn className="tableFour">{this.props.narrative}</TableRowColumn>
  <TableRowColumn className="tableFive">{this.props.amount}</TableRowColumn>
  <TableRowColumn className="tableSix"><div className="dotmenuSample"><img src={Dotmenu} alt="Dotmenu" className="Dotmenu" onClick={this.handleTouchTap} /> </div></TableRowColumn>

CSS

.Master, .Visa, .Paypal {
height: auto;
width: 100%; 
float: left;
}

.visaSample {
 padding-top: 40px;
 height: 20px;
 width: 20px;
 display: table-cell;
 }

.masterSample {
 padding-top: 20px;
 height: 30px;
 width: 30px;
 }

.paypalSample {
 padding-top: 20px;
 height: 30px;
 width: 20px;
 }

Answer 1

尝试使用flexbox将解决您的问题

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.flex-container > div {
  margin: 0 10px;
  text-align: center;
}

<div class="flex-container">
  <div>img</div>
  <div>text</div>
</div>

在您的<TableRowColumn

中尝试一下