How can I show an Image in middle of view in Zebble

Question

I want to create a view like this Image ( set image to middle of page)

I use this code

<TextView Id="HeaderIntro" Text="Your device heading from North is:" CssClass="header-intro" />
<TextView Id="Label" Text="waiting for compass..." />
<z-place inside="this" CssClass="CompassViewP">
  <ImageView Id="BackgroundImage" Path="Images/GeeksWhiteLogo.png"  />
  <ImageView Id="PointerImage" Path="Images/CompassPointer.png" Style.Visible="false" />
</z-place>

I wrote css

    .CompassViewP {
    height: calc("(view.Parent.ActualHeight)");
    }
#BackgroundImage {
    background-position: center;
}

I tried other css like

position:absolute;
top: 50%;

and

 vertical-align: middle;

Finally, the following view it

Answer 1

Your ImageView does not have any width and height specified, so it's getting its size from the image file. You are correctly setting its background-position to center but that's not enough because it will be centered within its width which happens to be the same as its source image size.

So the alignment doesn't change anything visually as there is no horizontal gap around it to make "center" meaningful.

To fix it, you should set the width of the ImageView to 100%. It's a good idea to set a Padding as well, to ensure on smaller devices it doesn't attach to the sides. Also the same for vertical gaps.

.CompassViewP {
    height: calc("(view.Parent.ActualHeight)");

    #BackgroundImage {
       background-position: center;
       width: 100%;
       height: 100%;
       padding: 50px;
   }
}