Wie kann ich den kleinen Etikett -Effekt im Designentwurf am mobilen Terminal genau erkennen?

Wie kann man den kleinen Etiketteneffekt im Designentwurf am mobilen Terminal erreichen?

Bei der Gestaltung mobiler Anwendungen ist die genaue Wiederherstellung der kleinen Etiketteneffekte im Designentwurf ein häufiges Problem. Insbesondere wenn es notwendig ist, einen Rand -Wraping -Text zu implementieren, und der Text horizontal und vertikal zentriert werden muss, kann es einige Herausforderungen geben. Insbesondere auf verschiedenen Geräten (wie Android und Apple) kann die Wirkung der vertikalen Zentrierung voreingenommen sein. In diesem Artikel werden zwei effektive CSS -Methoden untersucht, um dieses Problem zu lösen.

Problembeschreibung

Wie in der Abbildung gezeigt, möchten wir einen kleinen Etiketteneffekt erzielen, bei dem das Etikett mit dem Text von einem Rand eingewickelt wird und der Text horizontal und vertikal im Etikett zentriert ist. Beim Testen auf Mobilgeräten (Android und Apple) wurde jedoch festgestellt, dass der Zentrierungseffekt in vertikaler Richtung immer eine sichtbare Abweichung hatte und der Anzeigeeffekt auf verschiedene Geräte inkonsistent war. Wir müssen einen zuverlässigen Weg finden, um diesen Effekt zu erzielen.

Lösung

Um das obige Problem zu lösen, können wir in Betracht ziehen, die folgenden zwei CSS -Layout -Methoden zu verwenden:

1. Flex -Layout

   Flex -Layout ist eine moderne CSS -Layoutmethode, die sehr geeignet ist, um Text in Behältern zu zentrieren. Das Folgende ist der spezifische CSS -Code:

    .Etikett {
     Anzeige: Flex;
     Justify-Content: Center; /* Horizontales Zentrum*//
     Ausrichtung: Zentrum; /* vertikales Zentrum*///
     Linienhöhe: normal; /* Auf einigen Androiden, vertikal zentriert*/
     Grenze: 1px solide Rot;
   }

   In diesem Beispiel zeigt Anzeige: Flex macht einen Flex-Container und Justify-Incontent: Mitte- und Align-Items: Center Implementierung horizontal bzw. vertikale Zentrierung. Es ist besonders wichtig zu beachten, dass die Leitungshöhe: Normale Line darin besteht, die vertikale Zentrierung einiger Android-Geräte sicherzustellen.

2. Absolutes Layout

   Das absolute Layout kann auch verwendet werden, um den Zentrierungseffekt des Textes zu erreichen. Durch die Verwendung der absoluten Positionierung und Transformation kann die Position von Elementen genau kontrolliert werden. Das Folgende ist der spezifische CSS -Code:

    .Etikett {
     Position: Relativ;
     Grenze: 1px solide Rot;
   }
   .Text {
     Position: absolut;
     Links: 50%;
     Top: 50%;
     Transformation: Translate (-50%, -50%);
   }

   In diesem Beispiel wird .TAG als relativer Positionierungsbehälter eingestellt, während .Text als absolute Positionierung festgelegt wird. Mit links: 50%und oben: 50%, bewegen Sie die obere linke Ecke des Textes in die Mitte des Behälters und verwenden Sie dann Transformation: Übersetzen (-50%, -50%), um den Text nach der oberen linken Hälfte seiner Breite und Höhe zu bewegen, um den Zentrierungseffekt zu erzielen.

Durch die beiden oben genannten Methoden kann der kleine Tag -Effekt im Designentwurf am mobilen Terminal effektiv realisiert werden, und der konsistente vertikale Zentrierungseffekt kann auf Android- und Apple -Geräten aufrechterhalten werden.

Das obige ist der detaillierte Inhalt vonWie kann ich den kleinen Etikett -Effekt im Designentwurf am mobilen Terminal genau erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!