How to center a segment or button-bar?

Moshe Flam

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

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?

Fran Diox

@Moshe-Flam Use CSS: https://css-tricks.com/centering-css-complete-guide/