Заголовок заголовка и кнопка не вертикального выравнивания JQM 1.4

Question

Я понятия не имею, почему вертикальное выравнивание не работает, как в демонстрациях. Заголовок появляется под левой кнопкой. Я пробовал JQM 1.4.3 & 1.4.5 тот же результат.

<div data-role="header" data-position="fixed" data-tap-toggle="false"> 
    <a class="ui-btn-left ui-nodisc-icon ui-btn-inline ui-mini" href="#mypanel" 
    data-icon="grid" data-iconpos="notext"></a> 
    <h1 class="ui-title">Add Program</h1> 

</div> 

http://jsfiddle.net/59XDP/47/

Answer 1

Это происходит потому, что .ui-title установлен в display: block занимающей новую строку. Решение заключается в попытке inline-block

CSS

.custom-title { 
    display: inline-block; 
    margin: 0 40%; 
} 

HTML:

<h1 class="ui-title custom-title">Add Program</h1> 

Выход:

JSfiddle

Я использовал! Важно в JSfiddle, вы обязательно загрузите Custom CSS после этого, чтобы перезаписать его.

Answer 2

Все, что вам нужно сделать, это установить text-align: center; на div.header элемента и display: inline-block; на h1.ui-title элемент

(Demo)

.header { 
    text-align: center; 
} 
.ui-title { 
    display: inline-block; 
}