使用onsen ui时，导航条文本不在设备中心

I have downloaded default master-detail template from onsen ui, and then developed an cordova mobile application based on it.The header title in navigation bar is centered on pc-browser and chrome ripple, but not on device. On device it will stick to the left. I have add this style to see what is going on.

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

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

it seems the correspond div for header is not stretched.

似乎header的对应div没有拉伸。

this is on pc-browser

这是在电脑浏览器

And this is on mobile device (samsung android 4.2)

这是在移动设备上(三星安卓4。2)

ps. the problem exists on all pages.

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

1 个解决方案

#1

Try using fixed-style attribute on the navigation bar tag. Like this

尝试在导航条标签上使用固定样式的属性。像这样

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

Actually, the reason why it isn't centered on the device is that Onsen UI tries to emulate native behavior. On Android the navigation bar title is not centered, but left-aligned.

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