#1 2016-05-23 17:07:56

EGovMetrics
Member
Registered: 2016-05-21
Posts: 39

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

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]"
GetStyle "ImageCredits" "height" "[ImgHeight]"

// Set the style, therefore the image is not scaled

SetStyle "ImageCredits" "width" "175px"
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

Offline

#2 2016-05-23 17:25:59

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,660
Website

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

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
{
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  position: absolute;
  margin-top: -100px; /* Half the height */
  margin-left: -100px; /* Half the width */
}

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

Offline

#3 2016-05-23 18:12:18

EGovMetrics
Member
Registered: 2016-05-21
Posts: 39

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

Hi,
Works well:)

Thanks
Joseph Caristena

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.