Lösung für das Problem, dass die vertikale Zentrierung des Flex-Innenknopfs nicht zentriert ist

Problembeschreibung

Der Schaltflächenstil ist Symbol + Text. Wenn Sie Flex-Layout verwenden, um es vertikal zu zentrieren, werden Text und Symbol auf dem iPhone 7-Telefon nicht zentriert, sondern links angezeigt. Der Code lautet wie folgt (vereinfacht):

<Schaltfläche>
  <img src="./refresh.png" alt />
  {{ bestätigenButtonText }}
</button>

...
Taste {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  img {
      Breite: 36px;
      Höhe: 36px;
      Anzeige: Inline-Block;
  }
}

Erwarteter Stil:

Aktueller Stil:

Lösung

Legen Sie eine weitere Ebene mit Beschriftungen um das Symbol und den Text und legen Sie den Flex-Stil „Vertikal zentriert“ für die äußere Beschriftung fest. Der Code lautet wie folgt:

<Schaltfläche>
  <span Klasse="wrap">
     <img src="./refresh.png" alt />
      {{ bestätigenButtonText }}
  </span>
</button>

...
Taste {
   Anzeige: Flex;
   Elemente ausrichten: zentrieren;
   Inhalt ausrichten: zentriert;
  .wickeln {
      img {
          Breite: 36px;
          Höhe: 36px;
          Anzeige: Inline-Block;
      }
  }
}

Dies ist das Ende dieses Artikels zur Lösung des Problems, dass die vertikale Flex-Zentrierung innerhalb der Schaltfläche nicht zentriert ist. Weitere Informationen zur vertikalen Flex-Zentrierung innerhalb der Schaltfläche, die nicht zentriert ist, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!