标题标题和按钮不垂直对齐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中很重要，您确保在加载自定义CSS后覆盖它。

Answer 2

所有你需要做的是设置在text-align: center;元素div.header上display: inline-block;的h1.ui-title元素

（Demo）

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

上