容器样式如何垂直对齐图像？

Question

我希望将容器内的图片垂直居中对齐。我尝试了以下方法，但都失败了：

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>

- Todayboy

Answer 1

你需要设置display: flex。

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

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

- VJAI

---

@Todayboy - 那你最终使用了什么样式属性来实现垂直对齐呢？我也遇到了相同的问题，但根据这个答案还是无法解决。 - Smokin Joe