如何使用CSS定位離子按鈕

我試圖將按鈕定位到屏幕中心。但它看起來像按鈕的偏移量爲20像素，它距離精確中心垂直20像素。如何使用CSS定位離子按鈕

下面是它的外觀：

這裏的HTML正文：

<body ng-app="starter" class="platform-ios platform-cordova platform-webview"> 
    <ion-pane> 
     <ion-content> 
      <div id="cool-button-div"> 
      <button class="button button-block button-calm">Cool!</button> 
      </div> 
     </ion-content> 
    </ion-pane> 
    </body>

和CSS：

#cool-button-div { 

    position: relative; 
    width:200px; 
    margin:auto; 
    margin-top:50%; 

}

我可以通過計算精確的中心位置的按鈕屏幕，如果我使用top : 250px，它的工作原理，但如果我使用top:50%它不起作用。

注：我不想使用額外的行爲像spacer視圖。

來源

2016-10-17 Teja Nandamuri

我猜你是試圖把它定位到中間的屏幕（上下）屏幕，而不是中心（左右）。對？ – Dekel

保證金：自動製造div水平中心，因此我在垂直中心看 –

可能重複[如何垂直居中所有瀏覽器的div？]（http://stackoverflow.com/questions/396145/how-to-垂直中心的所有瀏覽器） – Dekel

我認爲vh單位將幫助你。請使用vh。

CSS： -

#cool-button-div { 

    position: relative; 
    width:200px; 
    margin:auto; 
    margin-top:50vh; 

}

來源

2016-10-17 01:03:19

很酷。我總是想避免放置額外的div。雖然它的工作，你能添加一些額外的參考嗎？ –

請檢查https://developer.mozilla.org/en-US/docs/Web/CSS/length#vh –

感謝您的快速響應！ –

如何使用CSS定位離子按鈕

回答

相關問題