如何使用CSS定位离子按钮

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图将按钮定位到屏幕中心。但它看起来像按钮的偏移量为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视图。

回答：

我认为vh单位将帮助你。请使用vh。

CSS： -

#cool-button-div { 
    position: relative; 
    width:200px; 
    margin:auto; 
    margin-top:50vh; 
}

以上是 如何使用CSS定位离子按钮 的全部内容， 来源链接： utcz.com/qa/265216.html

回到顶部