css - 如何在 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 没有指定任何宽度和高度，因此它从图像文件中获取其大小。您正确地将其背景位置设置为中心，但这还不够，因为它将在其宽度内居中，而宽度恰好与其源图像大小相同。

因此对齐不会在视觉上改变任何东西，因为它周围没有水平间隙以使“中心”有意义。

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

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

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