css - Position changes after ionic build android | android | ionic | ionicons -
hi im developing app using ionic framework.
i created 2 buttons work on ionic serve
, after ionic build android
totally unaligned.
<a href="#/app/ketels-list" class="circle button-custom"> <div class="dark"> <i class="icon ion-android-notifications placeholder-icon"></i> </div> <h6 class="master">vind de <b>betekenis</b> van <b>foutcodes!</b></h6> </a>
css
.welcomescreen #welcomecontent .circle{ width: 120px; height: 120px; margin: 2.5vh auto 25px; padding: 10px; border-radius: 50%; background-color: rgba(255,255,255,1); box-shadow: 0px; } .welcomescreen #welcomecontent .dark{ width: 100px; height: 100px; border-radius: 50%; background-color: #4f76ad; box-shadow: 0px; padding: 23px 27.5px; } .welcomescreen #welcomecontent .button-custom { color: #4f76ad ; border: 0px; text-decoration: none; } .welcomescreen #welcomecontent .button-custom.active, .welcomescreen #welcomecontent .button-custom:hover, .welcomescreen #welcomecontent .button-custom:focus { color: #fff; border-bottom: 0px; background-color: #4f76ad; box-shadow: inset 0px 4px 0px 0px rgba(0,0,0,0.2); } .welcomescreen #welcomecontent { margin: 0 auto; color: #fff; font-size: 50px; }
i tried sorts of center tricks seem te fail.
this should center icons:
.welcomescreen #welcomecontent .dark { position: relative; } .welcomescreen #welcomecontent { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
Comments
Post a Comment