How to center a segment or button-bar?



  • I want the segment (button bar, radio selection) in the horizontal center of the screen.

    0_1505774597641_segmentTabBar.jpg

    Here’s my code.

     <div id="segtbar" class="segment tbar">
          <div class="segment__item">
            <input type="radio" class="segment__input" name="segment-a" checked></input>
            <button class="segment__button">Nearby</button>
          </div>
          <div class="segment__item">
            <input type="radio" class="segment__input" name="segment-a"></input>
            <button class="segment__button">This way <i class="fa fa-hand-o-up" style="fong-size:17px""></i></button>
          </div>
          <div class="segment__item">
            <input type="radio" class="segment__input" name="segment-a"></input>
            <button class="segment__button">In Building</button>
          </div>
        </div>
        <ons-card id="crd1">
        <div class="title">One</div>
        <div class="content">
            showing messages for one.
        </div>
        </ons-card>
        <ons-card id="crd2">
        <div class="title">Two</div>
        <div class="content">
            showing messages for two.
        </div>
        </ons-card>
        <ons-card id="crd3">
        <div class="title">Three</div>
        <div class="content">
            showing messages for three.
        </div>
        </ons-card>
    
    

    What do I need to do in the CSS and in the HTML to get it centered?


  • Onsen UI


Log in to reply