如何使按鈕中的圖標居中

Question

在我的 ionic 3 項目中，按鈕圖標沒有居中。 當我在瀏覽器中測試它工作正常並且在 android 設備中它也正確顯示在中心。

但只有在 ios 設備中，它才不會顯示在中心。

上面的屏幕截圖來自 ios 設備。 因為 +,- 符號沒有在中心對齊。

網頁代碼：

<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;
    }

Answer 1

這是 css 你在找什么你可以根據你的要求固定高度和寬度;

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

Answer 2

html代碼

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

CSS

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

Answer 3

不要為 margin-left 使用精確的像素數量，因為它會隨着使用的設備（桌面，android 或 ios）而變化，因此最好使用百分比值作為 margin-left 和 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;
        }

如果 25% 的保證金不夠，請隨時根據您的需要增加和更改保證金百分比。 如果這不起作用請在下面評論:)