修复 ionic 项目 header 中的标题对齐

Question

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

但由于我无法确定的原因，当我尝试将 title class 应用于文本时，它要么从视图中隐藏，要么粘在左侧，取代我的 left-aligned 按钮。

<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"

我需要更改什么才能使左侧按钮保持在左侧，并使标题内容在 header 栏中居中？

Answer 1

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

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

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

默认情况下，

<h1> 将呈现为 header 栏中的标题。并且只会显示线。如果您不使用 <h1>，您打算作为 header 标题的内容将从视口中隐藏。据推测，解决这个问题的方法是按照 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>

修复 ionic 项目 header 中的标题对齐

Fixing title alignment in header for ionic project

html

css

ionic-framework