Bagaimana dengan tepat merealisasikan kesan label kecil dalam draf reka bentuk di terminal mudah alih?

Bagaimana untuk mencapai kesan label kecil dalam draf reka bentuk di terminal mudah alih?

Apabila merancang aplikasi mudah alih, bagaimana untuk memulihkan kesan label kecil dalam draf reka bentuk adalah masalah biasa. Terutama apabila perlu melaksanakan teks pembalut sempadan, dan teks perlu berpusat secara mendatar dan menegak, mungkin terdapat beberapa cabaran. Terutama pada peranti yang berbeza (seperti Android dan Apple), kesan pusat menegak mungkin berat sebelah. Artikel ini akan meneroka dua kaedah CSS yang berkesan untuk menyelesaikan masalah ini.

Penerangan Masalah

Seperti yang ditunjukkan dalam angka tersebut, kami ingin mencapai kesan label kecil di mana label dibalut dengan teks dengan sempadan, dan teksnya berpusat secara mendatar dan menegak di dalam label. Walau bagaimanapun, apabila ujian pada mudah alih (Android dan Apple), didapati bahawa kesan berpusat di arah menegak sentiasa mempunyai sisihan yang kelihatan, dan kesan paparan pada peranti yang berbeza tidak konsisten. Kita perlu mencari cara yang boleh dipercayai untuk mencapai kesan ini.

Penyelesaian

Untuk menyelesaikan masalah di atas, kita boleh mempertimbangkan menggunakan dua kaedah susun atur CSS berikut:

1. Susun atur flex

   Susun atur Flex adalah kaedah susun atur CSS moden, yang sangat sesuai untuk teks yang berpusat di dalam bekas. Berikut adalah kod CSS tertentu:

    .tag {
     Paparan: Flex;
     Justify-Content: Center; /* pusat mendatar*/
     Align-item: pusat; /* pusat menegak*/
     Talian ketinggian: normal; /* Pada beberapa android, berpusat secara menegak*/
     Sempadan: 1px merah pepejal;
   }

   Dalam contoh ini, paparan: flex membuat .tag container flex, dan membenarkan kandungan: pusat dan menyelaraskan-item: pusat melaksanakan pusat mendatar dan menegak, masing-masing. Sangat penting untuk diperhatikan bahawa ketinggian garis: garis normal adalah untuk memastikan pusat menegak pada beberapa peranti Android.

2. Susun atur mutlak

   Susun atur mutlak juga boleh digunakan untuk mencapai kesan pusat teks. Dengan menggunakan kedudukan dan transformasi mutlak, kedudukan elemen dapat dikawal dengan tepat. Berikut adalah kod CSS tertentu:

    .tag {
     Kedudukan: Relatif;
     Sempadan: 1px merah pepejal;
   }
   .teks {
     Kedudukan: Mutlak;
     Kiri: 50%;
     Atas: 50%;
     Transform: Terjemahan (-50%, -50%);
   }

   Dalam contoh ini, .tag ditetapkan sebagai bekas kedudukan relatif, manakala .text ditetapkan sebagai kedudukan mutlak. Dengan kiri: 50%dan atas: 50%, gerakkan sudut kiri atas teks ke pusat bekas, dan kemudian gunakan Transform: Terjemahan (-50%, -50%) untuk memindahkan teks ke bahagian kiri atas lebar dan ketinggiannya untuk mencapai kesan berpusat.

Melalui dua kaedah di atas, kesan tag kecil dalam draf reka bentuk dapat direalisasikan dengan berkesan pada terminal mudah alih, dan kesan pusat menegak yang konsisten dapat dikekalkan pada peranti Android dan Apple.

Atas ialah kandungan terperinci Bagaimana dengan tepat merealisasikan kesan label kecil dalam draf reka bentuk di terminal mudah alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!