Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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?
-