如何使按钮中的图标居中

新手上路,请多包涵

在我的 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;
    }

原文由 Karthik 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 808
1 个回答

这是 css 你在找什么你可以根据你的要求固定高度和宽度;

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

原文由 codeuix 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题