标题标题和按钮不垂直对齐JQM 1.4

Question

我不知道为什么垂直对齐在演示中不起作用。标题显示在左侧按钮下方。我试过JQM 1.4.3＆amp; 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中使用了！important，你确保之后加载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;
}