Question

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

干杯。

Answer 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的样式属性。

JQuery Mobile - 在屏幕中间对齐按钮

1 个答案: