如何在Zebble中的视图中间显示图像

Question

我想创建一个像这个图像的视图（将图像设置到页面中间）

我使用此代码

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

我写了css

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

我尝试过像

这样的其他CSS

position:absolute;
top: 50%;

和

 vertical-align: middle;

最后，以下视图

Answer 1

您的ImageView没有指定任何宽度和高度，因此它从图像文件中获取其大小。您正确地将背景位置设置为中心，但这还不够，因为它将在其宽度中居中，恰好与其源图像相同大小

因此，对齐不会在视觉上改变任何东西，因为它周围没有水平间隙可以使＃34;居中＆＃34;有意义。

要修复它，您应该将ImageView的宽度设置为100％。设置Padding也是一个好主意，以确保在较小的设备上它不会连接到侧面。垂直间隙也是如此。

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

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