我怎样才能在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; 
    } 
}