Forum | Appery.io

hello
I can use the js to set the image in horizontal center.
Appery ('mobileimage_3').css('margin', 'auto');

how can I let the image to the vertical center in different size?
I try that below is now working.
way 1:
Appery ('mobileimage_3')css('vertical-align', 'middle');

way 2:
var cellElement = Appery ('mobileimage_3').closest('td').
cellElement.css('text-align', 'center').css('vertical-align', 'middle');

Hello,

Please follow this topic.

Hello Sergiy
I follow the topic you mentioned,and try the css below.
img.centeredImage {
display: block;
margin-top: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom:auto;
}

the image will change ,but seen not at the vertical center in the smaller size phone?
should I need modify it somewhere?

Please read this nice tutorial for different solutions:
https://css-tricks.com/centering-css-...

Hi sergiy
thanks you again .
I follow the solution your provided,and try the code in css.

.continer1 {
position: relative;
}
.centerimage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

but it still now working!
can you help me~

Please change values in percents to viewport-units:

instead of:
pretop: 50%;
left: 50%; /pre
use:
pretop: 50vh;
left: 50vw;/pre

Hi sergiy

I try the code,but still can't work.
something wrong?

.continer4 {
position: relative;
}
.centerimage4 {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}

Hello Spark,

Could you please clarify do you have any other css rules that may affect to this component?

Hello Evgene
I set the mobile container and image like that.

and no any css rules on the event.

but I had one css to removed the H1.
h1[dsid=mobileheader]{
display:none!important;}

will this css cause the mistake?

following is my app public link.
http://appery.io/app/mobile-frame?src...

HelloEvgene
have any more advices?
or someone can kindly help me to figure out~
thanks!!