jQuery Mobile поместил списки в центр страницы - PullRequest
Новая
       8

jQuery Mobile поместил списки в центр страницы

2 голосов
/ 03 марта 2012

Я создаю приложение, используя 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 -->

Ответы [ 2 ]

1 голос
/ 03 марта 2012

Я не на 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/

0 голосов
/ 04 марта 2012

Если вам нужны списки не полной ширины, см. Здесь:

Списки вставок Если списки встроены в страницу с другими типами содержимого, список вставок упаковывает список в блок, который находитсявнутри области содержимого с небольшим полем и закругленными углами (тема контролируется).При добавлении атрибута data-inset = "true" в список (ul или ol) применяется внешний вид вставки.

...