How do I center ActionBar title text in Android (with Nativescript)?

Question

I want to center align the actionbar text

<ActionBar class="text-center" [title]="title" (loaded)="onLoadedActionBar()"></ActionBar>

in NativeScript. Currently the above renders with the title left aligned. I tried adding a class and adding text-align: center; but that did not work. In iOS it seems to automatically align this text center judging by the images in the NativeScript docs.

Solution in case anyone else ever needs it: Instead of using the title attribute of the ActionBar tag, use Label as a seperate internal tag as follows:

<ActionBar (loaded)="onLoadedActionBar()">
  <Label class="title" [text]="title"></Label>
</ActionBar>

and style the title in css:

.title {
  font-weight: bold;
  font-size: 17px;
}

Solved it for me.

Answer 1

SOLUTION

To point it out more clearly I write Meggan Naude's solution in this answer. Answering your own question in the question feed isn't obvious enough.

Instead of using the title attribute of the ActionBar tag, use Label as a seperate internal tag as follows:

<ActionBar (loaded)="onLoadedActionBar()">
  <Label class="title" [text]="title"></Label>
</ActionBar>

and style the title in css :

.title {
  font-weight: bold;
  font-size: 17px;
}

Again, this answer is credited to the question asker itself. Cheers