Блог

Главная - Вопросы по программированию - Как центрировать значок в кнопке

Как центрировать значок в кнопке

#html #css #ionic-framework #ionic3

#HTML #css #ионный каркас #ионический 3

Вопрос:

В моем проекте ionic 3 значок кнопки не центрируется. Когда я тестирую в браузере, он работает корректно, а на устройствах Android он также корректно отображается в центре.

Но только на устройствах ios он не отображается в центре.

введите описание изображения здесь

Скриншот выше сделан с устройства 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;
    }

Ответ №1:

Вот css что вы ищете вы можете исправить высоту и ширину в соответствии с вашими требованиями;

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

Комментарии:

1. Блестящий ответ 🙂 Спасибо

2. @ShellZero Спасибо тебе

Ответ №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;
 }

Ответ №3:

Не используйте точное количество пикселей для поля слева, потому что оно может варьироваться в зависимости от используемого устройства (настольный компьютер, Android или ios), поэтому для него лучше использовать процентное значение в качестве поля слева и поля справа.

 .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% недостаточно для маржи, пожалуйста, не стесняйтесь увеличивать и изменять процент маржи в соответствии с вашими потребностями.
И если это не сработало, пожалуйста, прокомментируйте ниже 🙂

Метки: