Question

我的混合移动应用程序中有一个按钮，当在iphone 5上查看时，它位于我想要的区域（中间中心）。

当我在iphone 6上观看它加上它移动时，现在我知道这是因为我的css非常具体但我想知道我是否可以得到一些指导如何我可以定位一个按钮保持不变设备（同一地点）。

这是我的css，所有帮助赞赏：）

#divheader {

    position: relative;
}

#btn {
     position:absolute;
    left: 10px;
    top: 198px;
    text-align: center;
    color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="kendo/styles/StyleSheet.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<body>
<body>
   <div data-role="view" style="background-color: #212a33" id = "divheader" data-title="Blocks">
       <div data-role="navbar" id="test">
           <span data-role="view-title">My View Title</span>
        </div>
       <div style="background-color: #212a33">
           <div id=test3>
       <span class="description" id="test4">Currently in stock:</span>
                    <input id="numeric" type="number" value="17" min="0" max="100" step="1" />
           </div>
       <a id="btn" data-role="button" data-click="onClick" align="center" style="margin: 0 auto; width: 300px;" >Click me!</a>
       </div>
       <div id="test2">
       </div>
       </div>
   </div>

   <script>
        // the content of the document.body is used by default
       var app = new kendo.mobile.Application();
   </script>
   <script type="text/javascript">
    var div = document.getElementById('test2');

    div.style.height = document.body.clientHeight + 'px';
</script>



</body>
</body>
</html>

Answer 1

你是对的，你的CSS非常具有绝对定位。它的左边距为10px，宽度为300px，适用于宽度为320px的iPhone 5。

如果你想让按钮居中，无论设备的宽度如何，我都会选择你已经在按钮的内联css中写的margin: 0 auto;。
对于使用margin: 0 auto的元素，它必须满足您可以看到here的一些要求。

你的CSS看起来像这样

#btn {
  display: block;
  margin: 0 auto; 
  width: 300px;
  color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05;
  border: 1px solid; /*For the border color to work you need a border*/
}

width和margin只是从降价处的按钮style - 标签移到那里。

当然，这会将按钮移回标题中，所以如果您不希望它在那里，您应该在标记中将标题声明在标题之外。

修改
对于水平居中的按钮和垂直放置一个具有视口全高的div，上面的代码不起作用。

你可以做的第一件事是摆脱javascript是给height 100vh的{{1}}（如解释here），但我认为这是个人喜好。

对于Button的CSS，这应该有效：

#btn { position: absolute; width: 300px; top: 50%; left: 50%; margin-left: -150px; transform: translateY -50%; color: #171e28; background-color: #f4af03;

}

对于水平部分，我们给予元素左边距为50％。因为它的左边框位于页面宽度的50％处，所以我们用margin-left: -150px进行校正（将元素向左移动一半宽度）。

对于垂直部分，我们的工作基本相同，但我们不知道这里的确切高度，因此位置由transform: translateY -50%;更正。
（Source）

CSS - 移动按钮出现在不同的区域，不同的设备上

1 个答案: