Comment réaliser avec précision l'effet de petite étiquette dans le projet de conception sur le terminal mobile?

Comment réaliser l'effet de petite étiquette dans le projet de conception sur le terminal mobile?

Lors de la conception d'applications mobiles, comment restaurer avec précision les effets de petite étiquette dans le projet de conception est un problème courant. Surtout lorsqu'il est nécessaire d'implémenter le texte de l'emballage des frontières et que le texte doit être centré horizontalement et verticalement, il peut y avoir des défis. Surtout sur différents appareils (comme Android et Apple), l'effet du centrage vertical peut être biaisé. Cet article explorera deux méthodes CSS efficaces pour résoudre ce problème.

Description du problème

Comme le montre la figure, nous voulons obtenir un petit effet d'étiquette où l'étiquette est enveloppée du texte par une bordure, et le texte est centré horizontalement et verticalement à l'intérieur de l'étiquette. Cependant, lors des tests sur mobile (Android et Apple), il a été constaté que l'effet de centrage dans la direction verticale avait toujours un écart visible et que l'effet d'affichage sur différents appareils était incohérent. Nous devons trouver un moyen fiable de réaliser cet effet.

Solution

Pour résoudre le problème ci-dessus, nous pouvons envisager d'utiliser les deux méthodes de disposition CSS suivantes:

1. Disposition flexible

   La disposition Flex est une méthode de mise en page CSS moderne, qui est très adaptée pour centrer du texte dans les conteneurs. Ce qui suit est le code CSS spécifique:

    .étiqueter {
     Affichage: flex;
     Justification-contenu: centre; / * Centre horizontal * /
     Align-Items: Centre; / * Centre vertical * /
     hauteur de ligne: normal; / * Sur certains androïdes, centré verticalement * /
     Border: 1px rouge solide;
   }

   Dans cet exemple, Affichage: Flex fait de .Tag un conteneur Flex, et justifier-content: central et align-items: Center implémenter le centrage horizontal et vertical, respectivement. Il est particulièrement important de noter que la ligne normale: la ligne normale est d'assurer le centrage vertical sur certains appareils Android.

2. Disposition absolue

   La disposition absolue peut également être utilisée pour réaliser l'effet centré du texte. En utilisant le positionnement et la transformation absolus, la position des éléments peut être contrôlée avec précision. Ce qui suit est le code CSS spécifique:

    .étiqueter {
     Position: relative;
     Border: 1px rouge solide;
   }
   .texte {
     Position: absolue;
     Gauche: 50%;
     en haut: 50%;
     Transformer: traduire (-50%, -50%);
   }

   Dans cet exemple, .tag est défini comme un conteneur de positionnement relatif, tandis que .Text est défini comme un positionnement absolu. Avec gauche: 50% et haut: 50%, déplacez le coin supérieur gauche du texte vers le centre du conteneur, puis utilisez la transformation: traduire (-50%, -50%) pour déplacer le texte vers la moitié supérieure gauche de sa largeur et de sa hauteur pour atteindre l'effet de centrage.

Grâce aux deux méthodes ci-dessus, le petit effet d'étiquette dans le projet de conception peut être réalisé efficacement sur le terminal mobile, et l'effet de centrage vertical cohérent peut être maintenu sur les appareils Android et Apple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!