Centering on phonegap + angular JS + onsen

Question

we are using phonegap + angular JS + onsen on creating an app.. We are using a modal that we can't center the header. Code below.

<ons-modal var="modalVariable">
   <ons-navigator var="detailsNavigator">
      <ons-toolbar>
         <div class="center">Header that needs to be centered.</div>
      </ons-toolbar>
      <ons-scroller>
         <ons-list>
            <ons-list-item class="bux-text">
               <ons-row>
                  <ons-col>
                     <div style="line-height: 20px">
                        Some Information Here
                     </div>
                  </ons-col>
               </ons-row>
            </ons-list-item>
         </ons-list>
      </ons-scroller>
      <ons-row>
         <ons-col>
            <ul class="list">
               <li class="list__item" style="margin: 10px 0;">
                  <ons-button style="width: 100%;" type="submit" modifier="large" ng-click="modalVariable.hide()">CONFIRM</ons-button>
               </li>
            </ul>
         </ons-col>
      </ons-row>
   </ons-navigator>
</ons-modal>

It doesn't center on the app but it center on the browser when you check on it.

I even tried to use below but still we can't show the header on center on modal.

<ons-toolbar>
     <div class="center" style="text-align: center;" >Header that needs to be centered.</div>
</ons-toolbar>

Answer 1

Have you tried: <ons-toolbar fixed-style> ?

http://onsen.io/reference/ons-toolbar.html#attributes