如何在按钮中居中图标

时间:2019-04-19 05:18:02

标签: html css css3 ionic-framework ionic3

在我的ionic 3项目中,按钮图标没有居中。当我在浏览器中测试时,它可以正常工作,而在android设备中,它也可以在中心正确显示。

但仅在ios设备中,它不会显示在中心。

enter image description here

上面的屏幕截图来自ios设备。因为+,-符号不在中心对齐。

HTML代码:

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

3 个答案:

答案 0 :(得分:1)

这是CSS,您正在寻找什么,您可以根据自己的需要固定高度和宽度;

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

请不要为左边距使用确切的像素数量,因为它会随所用设备(台式机,Android或ios)而变化,因此最好将百分比值用作左边距和边距-是的。

import QtQuick 2.0
import QtQuick.Window 2.0
import QtWebEngine 1.0

Window {
    width: 1024
    height: 750
    visible: true
    WebEngineView {
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}

如果25%的保证金不足,请随时根据您的需要增加和更改保证金百分比。 如果这不起作用,请在下面评论:)