容器的样式以垂直对齐内部图像答案

【问题标题】：Container's style to vertical align image inside容器的样式以垂直对齐内部图像
【发布时间】：2017-06-17 19:29:59
【问题描述】：

我希望容器内的图像垂直居中对齐。我在下面试过了，都失败了：

display:"inline-block", alignItems:"center", valign:"middle", verticalAlign:"middle",

我的代码如下：

<p style={{display:"inline-block", alignItems:"center", valign:"middle",
verticalAlign:"middle", textAlign:"center", width: "100%", height: "100%" }}>

<img style={{height: "auto", display:"inline-block", valign:"middle",
verticalAlign:"middle", width: "auto", maxWidth: "380px", maxHeight: "200px", 
overflow: "hidden" }}
src= "http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png" />

</p>

【问题讨论】：

标签： reactjs styles alignment vertical-alignment

【解决方案1】：

你必须设置display: flex。

const style = { display: 'flex', justifyContent: 'center', alignItems: 'center', width: '..', height: '..'}

<p class="container" style={style}>
    <img src={} width={} height={} />
  </p>

【讨论】：

@Todayboy - 那么最终是什么成为您的样式属性以使垂直对齐起作用？我正在为此苦苦挣扎，无法根据这个答案弄清楚。