修复离子项目标题中的标题对齐方式

Question

我有一个带有左侧和右侧菜单的抽象模板。对于ion-side-menu-content标记上的标题，我需要有3行文字。

但由于某个原因我无法识别，当我尝试将title类应用于文本时，它要么隐藏在视图之外，要么粘在左边，取代左对齐按钮我有。

<ion-side-menus>
  <ion-side-menu-content>

    <ion-nav-bar class="bar-stable">
      <p>Ac vestibulum scelerisque<br />vel porta a parturient</p>
    </ion-nav-bar>

    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" ng-click="showLeftMenu()">
      </button>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
      <button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
      </button>
    </ion-nav-buttons>
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <div class="bar bar-header">
      <p>Velit tristique fusce nisi parturient</p>
    </div>
    <ion-content has-header="true">
      <ul class="list">
        <li class="item">item 1</li>
      </ul>
    </ion-content>
    <ion-footer-bar class="bar bar-footer">
        <p>footer content here</p>
    </ion-footer-bar>
  </ion-side-menu>

  <ion-side-menu side="right">
    <ion-header-bar class="bar bar-header">
      <p>A condimentum metus varius eu ultrices</p>
    </ion-header-bar>
    <ion-content>
      <ul class="list">
        <li class="item">item 1</li>
      </ul>
    </ion-content>
    <ion-footer-bar class="bar bar-footer">
        <p>footer content here</p>
    </ion-footer-bar>
  </ion-side-menu>

</ion-side-menus>

没有class =“title”

使用class =“title”

我需要更改什么才能使左键保持在左侧，并将标题内容置于标题栏的中心？

Answer 1

http://ionicframework.com/blog/navigating-the-changes/

经过一番阅读，我发现我的麻烦来源实际上是一个DOM结构问题。

<ion-nav-bar>必须是<h1>的父标记以及<ion-nav-button>标记。

默认情况下，

<h1>将呈现为标题栏中的标题。只会显示一行。如果您不使用<h1>，则您希望成为标题标题的内容将从视口中隐藏。据推测，解决方法是只使用Ionic开发人员想要的<h1>标签，并使用CSS覆盖来强制显示多行。

您的HTML应如下所示：

<ion-nav-bar class="bar-stable">
  <h1 class="title">Ac vestibulum scelerisque<br />vel porta a parturient</h1>

  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="showLeftMenu()">
    </button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
    </button>
  </ion-nav-buttons>
</ion-nav-bar>