DecSoft Support - Image. How to align it vertically in the middle of the screen ?

Image. How to align it vertically in the middle of the screen ?

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at our YouTube channel and subscribe to be notified about new videos!

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Take a look at some frequently asked questions about us and our products!

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Joseph Caristena

Hi,
I have an image W 175 and H 330 on the View called
Credits.
I have to always align in the middle of the screen
this image.
So when screen changes the image must be always in the middle,
perfectly vertically aligned.

This is the code to keep it fixed (with no stretching)
and it is working well.

Just click on the View called Credits
click once on the View and then go to Code.
At the bottom of the View click on the Show tab
and copy the following script:

GetStyle "ImageCredits" "width" "[ImgWidth]"<br>GetStyle "ImageCredits" "height" "[ImgHeight]"</p>
<p>// Set the style, therefore the image is not scaled</p>
<p>SetStyle "ImageCredits" "width" "175px"<br>SetStyle "ImageCredits" "height" "330px"

Now the problem is to align it vertically in the middle
of the screen.

So when screen changes the image must be always in the middle,
perfectly vertically aligned.

Thanks
Joseph Caristena

DecSoft

Hello Joseph,

One possible way to do what you wanted is to using the below CSS code, for example, in the "Inline CSS" app's option:

#ImageCredits<br>{
  top: 50%;<br>  left: 50%;<br>  width: 200px;<br>  height: 200px;<br>  position: absolute;<br>  margin-top: -100px; /* Half the height */<br>  margin-left: -100px; /* Half the width */<br>}

Note that doing that you no need to change the image width nor height.

Purchase one or more licenses of our products if they are useful to you!

Joseph Caristena

Hi,
Works well:)

Thanks
Joseph Caristena

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.