简体   繁体   中英

How to Align center in IONIC

I am trying to align my Row items in center but actually its not going anywhere i am using Bootstrap CSS and ionic CSS i tried with both of them Can anyone check and tell me where i Am doing wrong.

HTML CODE ->

<div class="bar bar-header">
  <div class="tabs-striped tabs-color-assertive">
    <div class="row">
  <a class="tab-item col col-sm-6" data-ink-color="#ef473a" data-ink-opacity=".35" ng-click="activeMap()" ng-class="{'active': !isActive}" > <i class="icon ion-map"></i></a>
  <a class="tab-item col col-sm-6" data-ink-color="#ef473a" data-ink-opacity=".35"  ng-click="activeList()" ng-class="{'active': isActive}" > <i class="icon ion-ios-list-outline"></i></a>
    </div>
  </div>

I actually want to make it responsive and that's why escaping from OWN CSS

http://i.stack.imgur.com/6q3BI.png

to center anything in css you must use a specific width in main div then center inside divs with margin like this example:

<div class='main-div'>

 <div class='inside-div'>
  test
 </div>

</div>

and css look like :

.main-div{width:100%;}

.inside-div{width:50%;margin:0 auto; //or margin-right:25%; margin-left:25%;}

( 100 - inside-div width ) / 2 = margin left or right %

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM