css - 使用温泉 ui 时，导航栏文本不在设备中心

Question

我已经从onsen ui下载了默认的master-detail模板，然后基于它开发了一个cordova移动应用程序。导航栏中的标题标题以pc-browser和chrome ripple为中心，但是不在设备上。在设备上它会粘在左边。我已添加此样式以查看发生了什么。

    .navigation-bar__center
    {
        text-align:center;
        border:solid;
        border-width:1px;
    }
    .navigation-bar
    {
        border:solid;
        border-color:#f00;
        border-width:1px;
    }

header对应的div好像没有拉伸(stretch)

这是在电脑浏览器上

这是在移动设备上(三星安卓 4.2)

附言。所有页面都存在这个问题。

Answer 1

尝试在导航栏标签上使用 fixed-style 属性。像这样

<ons-toolbar fixed-style>
  <div class="center">
    This will be centered
  </div>
</ons-toolbar>

实际上，它不以设备为中心的原因是 Onsen UI 试图模拟 native 行为。在 Android 上，导航栏标题不是居中的，而是左对齐的。