这个问题与JQuery Mobile有关.我有一个屏幕,其中只包含一个标题和一个按钮.默认情况下,它显示在屏幕顶部.我想知道如何在屏幕中间对齐它.
干杯.
我假设您只想垂直对齐按钮,并将标题保留在页面顶部.垂直居中的最简单方法是绝对定位并将其设置为最高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的样式属性.