gpt4 book ai didi

html - 如何使用CSS定位 ionic 按钮

转载 作者:行者123 更新时间:2023-11-28 01:05:14 25 4
gpt4 key购买 nike

我正在尝试将按钮定位到屏幕中央。但看起来按钮有 20px 的偏移量。它看起来垂直距离准确的中心 20px。

这是它的样子:

enter image description here

这是 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%,它就不起作用.

注意:我不想使用像间隔 View 一样的额外 div。

最佳答案

我认为 vh 单元会对您有所帮助。请使用vh

CSS:-

#cool-button-div {

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

}

关于html - 如何使用CSS定位 ionic 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40077071/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com