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