モバイル端末のデザインドラフトの小さなラベル効果を正確に実現する方法は？

モバイル端末のデザインドラフトで小さなラベル効果を実現する方法は？

モバイルアプリケーションを設計するとき、デザインドラフトの小さなラベル効果を正確に復元する方法は一般的な問題です。特に、ボーダーラッピングテキストを実装する必要があり、テキストを水平および垂直に中央に配置する必要がある場合は、いくつかの課題があるかもしれません。特に、さまざまなデバイス（AndroidやAppleなど）では、垂直センタリングの効果がバイアスされる場合があります。この記事では、この問題を解決するための2つの効果的なCSSメソッドについて説明します。

問題の説明

図に示すように、ラベルが境界線によってテキストで包まれ、テキストがレーベル内の水平および垂直に中央に配置される小さなラベル効果を実現したいと考えています。ただし、モバイル（AndroidとApple）でテストするとき、垂直方向の中心効果は常に可視偏差があり、異なるデバイスのディスプレイ効果が一貫していなかったことがわかりました。この効果を達成するための信頼できる方法を見つける必要があります。

解決

上記の問題を解決するために、次の2つのCSSレイアウト方法の使用を検討できます。

1. フレックスレイアウト

   フレックスレイアウトは最新のCSSレイアウト方法であり、コンテナにテキストを中心にするのに非常に適しています。以下は特定のCSSコードです。

    .tag {
     ディスプレイ：Flex;
     justify-content：center; /* Horizo​​ntal Center*/
     Align-Items：Center; /*垂直中心*/
     Line-Height：正常; /*いくつかのAndroidで、垂直に中央にある*/
     境界線：1px固体赤;
   }

   この例では、ディスプレイ：Flexは.TAGをFlexコンテナにし、justify-Content：Center and Align-Items：それぞれ水平および垂直センタリングを実装します。ラインハイト：通常のラインは、一部のAndroidデバイスを垂直に介入することを保証することであることに注意することが特に重要です。

2. 絶対レイアウト

   絶対レイアウトを使用して、テキストの中心効果を実現することもできます。絶対的な位置決めと変換を使用することにより、要素の位置を正確に制御できます。以下は特定のCSSコードです。

    .tag {
     位置：相対;
     境界線：1px固体赤;
   }
   。文章 {
     位置：絶対;
     左：50％;
     トップ：50％;
     変換：翻訳（-50％、-50％）;
   }

   この例では、.TAGは相対的な位置付けコンテナとして設定され、.textは絶対的な位置付けとして設定されます。左：50％と上部：50％：テキストの左上隅をコンテナの中央に移動し、次に変換：翻訳（-50％、-50％）を使用して、テキストをその幅と高さの左半分に移動してセンターリング効果を達成します。

上記の2つの方法により、デザインドラフトの小さなタグ効果をモバイル端末で効果的に実現でき、AndroidおよびAppleデバイスで一貫した垂直センタリング効果を維持できます。

以上がモバイル端末のデザインドラフトの小さなラベル効果を正確に実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。