JQuery Mobile - 屏幕中间的对齐按钮答案

【问题标题】：JQuery Mobile - align button in middle of screenJQuery Mobile - 屏幕中间的对齐按钮
【发布时间】：2011-03-20 13:46:55
【问题描述】：

这个问题是关于 JQuery Mobile 的。我有一个仅包含标题和按钮的屏幕。默认情况下，它显示在屏幕顶部。我想知道如何在屏幕中间对齐它。

干杯。

【问题讨论】：

在 Jquery Mobile 中水平对齐按钮 -> stackoverflow.com/questions/10090150/…
我花了 10 年时间避开桌子，出于某种我什至不记得的原因……桌子让生活更轻松……我不是英雄 :)

标签： css jquery mobile

【解决方案1】：

我假设您只想垂直对齐按钮，并将页眉留在页面顶部。垂直居中的最简单方法是将其绝对定位并将其顶部设置为 50%。这会将内容的顶部放在屏幕中间。

如果您希望内容的垂直中心位于屏幕中间，那么您必须知道居中内容的高度，并使用负上边距将内容向上移动该高度的一半。使用 jQuery Mobile 添加的内边距和边框，一个 1em 字体大小的文本按钮的高度约为 2.4em，需要向上移动 1.2em。

这里是一个例子，我把我的按钮放在一个 div 中并且完全对齐 div：

<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head><body>
<div data-role="page"> 
  <div data-role="header">Header</div> 
  <div data-role="content">
    <div style="position: absolute; top: 50%; margin-top: -1.2em;">
      <a href="index.html" data-role="button">Button</a>
    </div>
  </div>
</div>
</body></html>

当我自己尝试这个时，按钮的宽度从屏幕的整个宽度变为可能的最小宽度。如果您仍然希望按钮在屏幕上伸展，请添加“width:100%; margin-left: -1em;”到包含 div 的样式属性。

【讨论】：

如果你想水平居中怎么办？
@Dylan：只需将“top”替换为“left”即可将其水平居中。或添加“左：50%；”使其水平和垂直居中。