Ionic 2如何在Android和iOS端将标题右对齐？

嘿，我来帮你搞定这个ion-title右对齐的问题！针对Android和iOS两大平台，有几种简单且有效的方法，下面给你一步步说明：

方法一：局部页面自定义样式（推荐） #

如果只是想让单个页面的标题右对齐，可以在对应页面的SCSS文件中添加以下样式，同时给ion-title加上自定义类：

1. 添加CSS样式 #

/* 适配iOS平台 */
.ios .title-right {
  text-align: right;
  padding-right: 16px; /* 可选，避免标题紧贴屏幕边缘 */
}

/* 适配Android平台 */
.md .title-right {
  text-align: right;
  padding-right: 16px;
}

2. 修改HTML结构 #

给ion-title加上我们定义的title-right类：

<ion-header>
  <ion-navbar>
    <ion-title class="title-right">my page</ion-title>
  </ion-navbar>
</ion-header>

方法二：全局生效所有页面标题 #

如果你希望所有页面的ion-title都默认右对齐，可以在项目根目录的app.scss中添加全局样式：

/* 全局iOS标题右对齐 */
.ios ion-title {
  text-align: right;
  padding-right: 16px;
}

/* 全局Android标题右对齐 */
.md ion-title {
  text-align: right;
  padding-right: 16px;
}

备选方案（flex布局实现） #

如果上面的方法在你的Ionic版本中不生效，试试用flex布局来控制——因为Ionic的工具栏内部默认是flex布局，这种方式兼容性更好：

/* iOS平台 */
.ios .toolbar-title {
  justify-content: flex-end;
  padding-right: 16px;
}

/* Android平台 */
.md .toolbar-title {
  justify-content: flex-end;
  padding-right: 16px;
}

内容的提问来源于stack exchange，提问作者Joe Sleiman