CODEWITHSUNDEEP
htmlcssionic-frameworkionic3
Karthik
Karthik

Reputation: 5759

How to center the icon in the button

In my ionic 3 project, the button icon doesn't become centered. When I test in browser it works correctly and in android devices it also shows correctly in the center.

But only in ios devices does it not show in the center.

enter image description here

The screenshot above is from an ios device. In that the +,- symbols are not aligned in the center.

Html code: 

<ion-col style="display: contents">
  <button primary large class="inbtn" (click)="decrement()">
      <ion-icon name="remove" ></ion-icon>
</button>
<h2 style="margin-left: 7px;margin-top: 0px;font-size: 2.4rem;"><b>{{currentNumber}}</b></h2>
<button primary large class="inbtn" (click)="increment()" >
  <ion-icon name="add" ></ion-icon>
</button>
</ion-col>

css: 

.inbtn{
     height: 30px;
    width: 30px;
    display: inline-block;
    border-radius: 50%;
    font-size: large;
    font-weight: 500;
    margin-left: 7px;
    vertical-align: middle;
    background-color:  #d8d8d8 !important;
    text-align: center;
  -webkit-appearance: none;
    }

Upvotes: 8

Views: 36616

Answers (3)

codeuix
codeuix

Reputation: 1396

Here is css what are you looking for you can fix height and width according to your requirement;

.inbtn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;    
}

Upvotes: 28

Yoosaf Abdulla
Yoosaf Abdulla

Reputation: 3978

html code

 <ion-item>
   <ion-button class="center" color="success">Next</ion-button>
 </ion-item>

CSS

.center{
   margin-left: auto;
   margin-right: auto;
   display: block !important;
 }

Upvotes: 3

Lalana Chamika
Lalana Chamika

Reputation: 615

Do not use an exact pixel amount for the margin-left, because it can vary with the device used(desktop,android or ios),There for it is better to use a percentage value as the margin-left and margin-right.

.inbtn{
         height: 30px;
        width: 30px;
        display: inline-block;
        border-radius: 50%;
        font-size: large;
        font-weight: 500;
        margin-left: 25%;
        margin-right:25%;
        vertical-align: middle;
        background-color:  #d8d8d8 !important;
        text-align: center;
      -webkit-appearance: none;
        }

If 25% is not enough for the margin ,pls feel free to increase and change the margin percentage according to your need. And if this didn't work pls comment below :)

Upvotes: 0

Related Questions