Button-bar button-bar-inline and text-center, is not working。

code:

       <ion-header-bar>
        <div class="button-bar button-bar-inline">
            <a class="button ">我是会员</a>
            <a class="button">申请会员</a>
        </div>
    </ion-header-bar>

i want:

help me, thanks. :blush:

.button-inline floats buttons to the left. So to center them, do this.

.center{
  text-align:center !important;
}

.button-bar.button-bar-inline > .button {
float: none !important;
}

Markup

   <ion-header-bar>
    <div class="button-bar button-bar-inline center">
        <a class="button ">我是会员</a>
        <a class="button">申请会员</a>
    </div>
</ion-header-bar>
1 Like

thank for your help, is working! but something different。

i try…
code valid:

        <div class="button-bar button-bar-inline center">
            <a class="button button-positive">我是会员</a><a class="button ">申请会员</a>
        </div>

code invalid:

        <div class="button-bar button-bar-inline center">
            <a class="button button-positive">我是会员</a>
            <a class="button ">申请会员</a>
        </div>

so… has better idea?

Alright, You can do this instead. Remove the inline class and do this.

    <div class="button-bar center">
        <a class="button ">我是会员</a>
        <a class="button">申请会员</a>
    </div>

And this for the css

.center{
  text-align:center ;
  -webkit-box-flex: 0 1 auto ; 
  -webkit-flex:  0 1 auto ; 
  -moz-box-flex:  0 1 auto ; 
  -moz-flex:  0 1 auto ; 
  -ms-flex:  0 1 auto ; 
  flex:  0 1 auto ; 
  width: 50% ;
  margin:auto ;
}
3 Likes

wow, i never seen before css: flex:smile: thank for your help。

How to make buttons clickable ?