2017-02-01 8 views
0

Я хочу, чтобы изображение внутри контейнера вертикально выровнялось по центру. Я попытался ниже, все потерпели неудачу:Стиль контейнера для вертикального выравнивания изображения внутри

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> 

ответ

1

Вы имеете установить display: flex.

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

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

Thx! по вашему коду я могу вертикально повернуть img сейчас :) – Todayboy