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!!