html - 修复 ionic 元素标题中的标题对齐

Question

我有一个带有左右侧边菜单的抽象模板。对于 ion-side-menu-content 标签上的 header ，我需要 3 行文本。

但由于我还无法确定的原因，当我尝试将 title 类应用于文本时，它要么从 View 中隐藏，要么粘在左边，取代左边-对齐按钮我有。

<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> ，您打算成为页眉标题的内容将从视口(viewport)中隐藏。据推测，解决这个问题的方法是只使用 <h1>按照 Ionic 开发人员的意图标记，并使用 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>