# Not able to center text in navbar

**URL:** <https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176>\
**Category:** ionic-v3\
**Created:** [July 11, 2016, 1:16pm UTC](https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176 "2016-07-11T13:16:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielgroh](https://avatars.discourse-cdn.com/v4/letter/d/ed8c4c/32.png) [@danielgroh](https://forum.ionicframework.com/u/danielgroh)\
**Post date:** [July 11, 2016, 1:16pm UTC](https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176/1 "2016-07-11T13:16:04Z")

</div>

Hello everyone,

this should be a simple one.

I already tried `item-center` but didn’t work

```
<ion-header>
    <ion-navbar>
        <ion-title text-center>{{title}}</ion-title>
    </ion-navbar>

    <ion-toolbar padding>
        <ion-searchbar placeholder="Search..." hideCancelButton="true"></ion-searchbar>
    </ion-toolbar>
</ion-header>

```

my `{{title}}` is not getting centered. I’m using beta10

Can I do this without changing `scss`?

Here is how it’s shwon:

![image](https://global.discourse-cdn.com/ionicframework/original/3X/3/b/3b0b4d7b6bbd902b17b91f4b3c40c5d222dc67ac.PNG)

---

<div class="post-metadata">

**Author:** ![raymando](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@raymando](https://forum.ionicframework.com/u/raymando)\
**Post date:** [July 11, 2016, 1:23pm UTC](https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176/2 "2016-07-11T13:23:30Z")

</div>

I got around this by adding another button on the right side and matching the css to the back button, you could disable it and make it invisible (Mine is just a home button).

---

<div class="post-metadata">

**Author:** ![DidelotK](https://avatars.discourse-cdn.com/v4/letter/d/8e7dd6/32.png) [@DidelotK](https://forum.ionicframework.com/u/DidelotK)\
**Post date:** [July 11, 2016, 1:31pm UTC](https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176/3 "2016-07-11T13:31:15Z")

</div>

I think this is maybe not the best way but it works.  
Add this in your scss  
.title{  
text-align:center;  
}

\<ion-title class=“title”\>{{title}}\</ion-title\>

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 11, 2016, 7:46pm UTC](https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176/4 "2016-07-11T19:46:07Z")

</div>

So this is not possible with the current set up. At least not cleanly.

---

<div class="post-metadata">

**Author:** ![Nexi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nexi/32/117290_2.png) [@Nexi](https://forum.ionicframework.com/u/Nexi)\
**Post date:** [November 26, 2016, 1:33pm UTC](https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176/5 "2016-11-26T13:33:24Z")

</div>

The following change solved the problem for me. I copied the code from ionic/src/components/toolbar/toolbar.ios.scss and changed it to md and wp:

## app.scss

```
.toolbar-title-md {
  text-align: center;
}
.toolbar-md ion-title {
  position: absolute;
  top: 0;
  left: 0;

  padding: 0;  

  width: 100%;
  height: 100%;

  pointer-events: none;
}
.toolbar-title-wp {
  text-align: center;
}
.toolbar-wp ion-title {
  position: absolute;
  top: 0;
  left: 0;

  padding: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}
```

---

<div class="post-metadata">

**Author:** ![giogus](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/giogus/32/81651_2.png) [@giogus](https://forum.ionicframework.com/u/giogus)\
**Post date:** [February 1, 2017, 6:43pm UTC](https://forum.ionicframework.com/t/not-able-to-center-text-in-navbar/57176/6 "2017-02-01T18:43:58Z")

</div>

Thank you! It’s working 😃