Ionic 3 ion-title 无法对齐中心

Question

我使用 Ionic 3，下面的代码无法将标题居中对齐，由于 ion-buttons，它向右移动了一点。如何解决？

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="close()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title text-center>{{bookName}}</ion-title>
</ion-toolbar>
</ion-header>

Answer 1

这不是ionic v3，你用的组件是ionic v4，反正你可以这样试试：

<ion-header>
  <ion-toolbar color="primary" text-center>
    <ion-buttons slot="start">
      <ion-button (click)="close()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title>{{bookName}}</ion-title>
  </ion-toolbar>
</ion-header>

Answer 2

一个简单的方法是使用 css 你可以把这个 class

page-name {
     ion-title {
         position: “relative”;
         left: 5px  —- here what you desire 
      }
}

Answer 3

您可以尝试将您的标题包裹在 div 中，如下所示：

<div text-center>
    <ion-title>YOUR TITLE</ion-title>
</div>

Answer 4

使用 class ion-text-center 如下所示：

<IonTitle class="ion-text-center">Game</IonTitle>

Answer 5

对于离子 4：

在您的 ion-title 组件中，

添加 class="ion-text-center" 使其居中对齐。由于按钮，这也会产生有问题的向右偏移。
添加style="margin-left: -52px;"（计算你想要均衡的有问题的偏移量，在我的例子中是52px）。

.

<ion-toolbar> 
     <ion-buttons slot="start"> 
<ion-menu-button></ion-menu-button> 
</ion-buttons> 
     <ion-title class="ion-text-center" style="margin-left: -52px;"> 
         My App 
     </ion-title> 
 </ion-toolbar>

Answer 6

只需在标题处添加 mode=ios

<ion-title mode=ios>Your Title</ion-title>

在离子 3、4 和 5 中测试

Answer 7

设置文本居中并缩进-45px以调整后退按钮space

.header .toolbar-title{
    text-align: center;
    text-indent: -45px;
}

Answer 8

试试这个 align="center"

<ion-header>
 <ion-toolbar>
 <ion-title align="center">Register</ion-title>
  </ion-toolbar>
</ion-header>

Answer 9

无需调整样式和元素属性，只需设置 ionic 配置 即可在所有平台上设置标题居中。

IonicModule.forRoot(MyApp, {
  backButtonText: 'Back',
  backButtonIcon: 'ios-arrow-back',
  mode: 'ios', // THIS CONFIG CENTERS THE TITLE ACROSS ALL PLATFORMS
  iconMode: 'md',
  modalEnter: 'modal-slide-in',
  modalLeave: 'modal-slide-out',
  tabsPlacement: 'bottom',
  pageTransition: 'ios-transition',
  swipeBackEnabled: true
}),

Answer 10

以下解决方案对我有用。即使一侧有按钮，它仍然有效。

ion-title {
  text-align: center;
  padding: 0 78px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 11

已接受的答案没有以完美的方式将标题对齐到中心位置。我添加了自定义 CSS 来实现这一点。

例如

<ion-header>
  <ion-toolbar color="primary">
    <ion-title class="header-title">Payment Detail</ion-title>
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon name="log-out" class="logout-icon" (click)="logout()"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

.header-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 150px;
    text-align: center;
}

Answer 12

对于 ionic 5x 这似乎有效

<div style="margin-left: auto;margin-right: auto;" classs="ion-text-center">
    <ion-title>Testimonials</ion-title>
  </div>

Ionic 3 ion-title 无法对齐中心

Ionic 3 ion-title cannot align center

ionic4