How to center a segment or button-bar?
-
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?
-