JQuery Mobile - 在屏幕中间对齐按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6405034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile - align button in middle of screen
提问by Karan
This question is regarding JQuery Mobile. I have a screen which simply contains a heading and a button. By default, this appears on top of the screen. I was wondering how to align it at the middle of the screen.
这个问题是关于 JQuery Mobile 的。我有一个屏幕，它只包含一个标题和一个按钮。默认情况下，它出现在屏幕顶部。我想知道如何在屏幕中间对齐它。
Cheers.
干杯。
回答by ttubrian
I assume that you want to vertically align the button only, and leave the header at the top of the page. The easiest way to center something vertically is to position it absolutely and set it's top to 50%. That will put the top of the content in the middle of the screen.
我假设您只想垂直对齐按钮，并将页眉留在页面顶部。垂直居中的最简单方法是将其绝对定位并将其顶部设置为 50%。这会将内容的顶部放在屏幕的中间。
If you want the vertical center of the content in the middle of the screen, then you have to know the height of the content being centered and move the content up by half of that amount using a negative top margin. With the padding and borders added by jQuery Mobile, a button with 1em font-sized text will have about 2.4em height and need to move up by 1.2em.
如果您希望内容的垂直中心位于屏幕中间，那么您必须知道居中的内容的高度，并使用负上边距将内容向上移动该量的一半。通过 jQuery Mobile 添加的内边距和边框，具有 1em 字体大小文本的按钮将具有大约 2.4em 的高度，并且需要向上移动 1.2em。
Here is an example, I've put my button in a div and absolutely aligned the div:
这是一个例子，我把我的按钮放在一个 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>
When trying this myself, the width of the button went from the full width of the screen to it's smallest possible width. If you still want the button to stretch across the screen then add "width:100%; margin-left: -1em;" to the containing div's style attribute.
自己尝试时，按钮的宽度从屏幕的全宽变为可能的最小宽度。如果您仍然希望按钮在屏幕上伸展，请添加“width:100%; margin-left: -1em;” 到包含 div 的样式属性。
