2012-03-02 2 views
2

Я создаю приложение с помощью jQuery Mobile, и я пытаюсь сосредоточить свои просмотры списка, но не могу это сделать. Я не хочу, чтобы мои списки начинались в верхней части страницы, но в центре. Как это обойти?jQuery Mobile put Списки в центре страницы

Также я использую многостраничный шаблон, вставить его здесь для удобства

<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 --> 

+0

Что вы подразумеваете под списками? И вы хотите, чтобы они были вертикально выровнены? –

+0

jquery mobile, есть вид списка типов макета data-role = "listview". Я хочу, чтобы списки начинались в центре экрана, а не сверху – d123

+0

@ user1053408 Почему в вашем примере кода нет списков? Это ваш фактический код? – Jasper

ответ

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/

0

Если вы хотите просто списки, которые не являются полной ширины, смотрите здесь:

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

Смежные вопросы