Ionic 3 ion-title не может выровнять центр

Я использую Ionic 3, ниже код не может выровнять заголовок по центру, он немного сдвигается вправо из-за ионных кнопок. Как это решить?

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

ionic4
person Pardeep    schedule 21.09.2018    source источник

Ответы (11)


arrow_upward
1
arrow_downward

Вы можете попытаться обернуть свой заголовок в div следующим образом:

<div text-center>
    <ion-title>YOUR TITLE</ion-title>
</div>
person Rob    schedule 22.09.2018
comment
Это не сработает, если у вас есть кнопка на одной стороне заголовка. - person Rajeshwar; 19.01.2021
comment
Что ж, ответ касается вопроса, который, как я полагаю, был решен с момента его принятия. Мне жаль слышать, что это не сработает конкретно в вашем случае. - person Rob; 19.01.2021

arrow_upward
5
arrow_downward

просто добавьте mode = ios в заголовок, подобный этому

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

Протестировано в ионных 3, 4 и 5 обоих

person Jain Bhavesh    schedule 25.03.2020

arrow_upward
0
arrow_downward

Это не 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>
person Juan Lozoya    schedule 21.09.2018
comment
Привет, Хуан, спасибо, но это не работает. Заголовок выравнивается по центру плюс ширина значка. Так что слегка выровняйте по правому краю - person Pardeep; 22.09.2018

arrow_upward
0
arrow_downward

Легкий способ сделать это с помощью css, вы можете поместить этот класс

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

arrow_upward
0
arrow_downward

Используйте класс ion-text-center, как показано ниже:

<IonTitle class="ion-text-center">Game</IonTitle>
person Yuvraj Patil    schedule 08.03.2020

arrow_upward
0
arrow_downward

Для Ionic 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>
person treecon    schedule 24.03.2020

arrow_upward
0
arrow_downward

Установите выравнивание текста по центру и сделайте отступ на -45 пикселей, чтобы отрегулировать расстояние до кнопки возврата.

.header .toolbar-title{
    text-align: center;
    text-indent: -45px;
}
person Shailesh Bhardwaj    schedule 08.05.2020

arrow_upward
0
arrow_downward

Попробуйте это align = center

<ion-header>
 <ion-toolbar>
 <ion-title align="center">Register</ion-title>
  </ion-toolbar>
</ion-header>
person Manoj Alwis    schedule 20.08.2020

arrow_upward
0
arrow_downward

Вместо того, чтобы настраивать стили и атрибуты элементов, вы можете просто установить ionic config, чтобы заголовок был центрирован для всех платформ.

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
}),
person Naveen Kumar V    schedule 16.09.2020

arrow_upward
0
arrow_downward

Приведенное ниже решение сработало для меня. Даже если на одной стороне есть кнопка, она все равно будет работать.

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

введите описание изображения здесь

person Rajeshwar    schedule 19.01.2021

arrow_upward
0
arrow_downward

Принятый ответ не идеально выравнивает заголовок по центру. Для этого я добавил собственный CSS.

Ex.

<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;
}
person Alfaz Jikani    schedule 24.01.2021