1
votes

Comment centrer l'icône dans le bouton

Dans mon projet ionic 3, l'icône du bouton n'est pas centrée. Lorsque je teste dans le navigateur, cela fonctionne correctement et sur les appareils Android, il s'affiche également correctement au centre.

Mais ce n'est que sur les appareils iOS qu'il ne s'affiche pas au centre.

La capture d'écran ci-dessus provient d'un appareil ios. En ce que les symboles +, - ne sont pas alignés au centre.

Code HTML:

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

css:

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

html css ionic-framework ionic3

0 commentaires

3 Réponses :

5
votes

Voici css ce que vous cherchez, vous pouvez fixer la hauteur et la largeur selon vos besoins;

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

1 commentaires

Réponse géniale :) Merci

0
votes

N'utilisez pas une quantité exacte de pixels pour la marge gauche, car elle peut varier en fonction de l'appareil utilisé (ordinateur de bureau, android ou ios), là car il est préférable d'utiliser une valeur en pourcentage comme marge gauche et marge- à droite.

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

Si 25% ne suffit pas pour la marge, n'hésitez pas à augmenter et à modifier le pourcentage de marge en fonction de vos besoins. Et si cela ne fonctionne pas, veuillez commenter ci-dessous :)

0 commentaires

1
votes

code html

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

CSS

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

0 commentaires