Question

我正在使用jQuery Mobile创建一个应用程序，我一直试图将我的列表视图居中，但似乎无法做到。我不希望我的列表从页面顶部开始，而是在中心。有什么方法吗？

此外，我正在使用多页模板，将其粘贴在此处以便于参考

<body> 

<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
    <h1>Foo</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>I'm first in the source order so I'm shown as the page.</p>      
    <p>View internal page called <a href="#bar">bar</a></p> 
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
    <h1>Bar</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>      
    <p><a href="#foo">Back to foo</a></p>   
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

Answer 1

我不是100％确定你想要什么，但是如果你想改变一个元素的位置，那么CSS就是它的所在：

html, body {
    height : 100%;
}
.ui-mobile .ui-page, .ui-mobile .ui-page .ui-content {
    height : 100%;
}
.ui-mobile .ui-page .ui-content .ui-listview {
    position : relative;
    top      : 50%;
}

这使得页面至少与屏幕一样大，然后将列表视图小部件向下移动50%。

以下是演示：http://jsfiddle.net/jasper/pr7h2/2/

Answer 2

如果您只想要非全宽的列表，请参阅此处：

插入列表如果列表嵌入在包含其他类型内容的页面中，则插入列表会将列表打包到位于内容区域内的块中，该块具有一些边距和圆角（主题控制）。通过将data-inset =“true”属性添加到列表（ul或ol），应用插入外观。

jQuery Mobile将列表放在页面中心

2 个答案: