모바일 터미널의 설계 초안에서 작은 레이블 효과를 정확하게 인식하는 방법은 무엇입니까?

모바일 터미널의 설계 초안에서 작은 레이블 효과를 달성하는 방법은 무엇입니까?

모바일 애플리케이션을 설계 할 때 설계 초안에서 작은 레이블 효과를 정확하게 복원하는 방법은 일반적인 문제입니다. 특히 테두리 랩핑 텍스트를 구현할 필요가 있고 텍스트가 수평 및 수직으로 중앙에 있어야 할 경우 몇 가지 어려움이있을 수 있습니다. 특히 다른 장치 (예 : Android 및 Apple)에서 수직 센터링의 효과가 편향 될 수 있습니다. 이 기사는이 문제를 해결하기위한 두 가지 효과적인 CSS 방법을 살펴볼 것입니다.

문제 설명

그림과 같이, 우리는 레이블이 테두리로 텍스트로 랩핑되는 작은 레이블 효과를 달성하고, 텍스트는 레이블 내부의 수평 및 수직으로 중앙에 있습니다. 그러나 모바일 (Android 및 Apple)에서 테스트 할 때 수직 방향의 센터링 효과는 항상 눈에 띄는 편차를 가졌으며 다른 장치에 대한 디스플레이 효과가 일치하지 않는 것으로 나타났습니다. 이 효과를 달성 할 수있는 신뢰할 수있는 방법을 찾아야합니다.

해결책

위의 문제를 해결하기 위해 다음 두 가지 CSS 레이아웃 방법을 사용하는 것을 고려할 수 있습니다.

1. 플렉스 레이아웃

   Flex 레이아웃은 최신 CSS 레이아웃 방법으로 컨테이너의 텍스트를 중심하는 데 매우 적합합니다. 다음은 특정 CSS 코드입니다.

    .tag {
     디스플레이 : Flex;
     정당화 컨텐츠 : 센터; /* 수평 센터*/
     정렬 구조 : 센터; /* 수직 센터*/
     라인 높이 : 정상; /* 일부 안드로이드에서 수직 중심*/
     테두리 : 1px 솔리드 레드;
   }

   이 예에서는 디스플레이 : Flex가 플렉스 컨테이너를 만들고 정당화-컨텐츠 : 센터 및 정렬 항목 : 센터는 각각 수평 및 수직 센터링을 구현합니다. 라인 높이 : 정상 선은 일부 안드로이드 장치를 수직 중심으로 보장하는 것입니다.

2. 절대 레이아웃

   절대 레이아웃을 사용하여 텍스트의 중심 효과를 달성 할 수 있습니다. 절대 포지셔닝 및 변환을 사용함으로써 요소의 위치를 ​​정확하게 제어 할 수 있습니다. 다음은 특정 CSS 코드입니다.

    .tag {
     위치 : 상대;
     테두리 : 1px 솔리드 레드;
   }
   .텍스트 {
     위치 : 절대;
     왼쪽 : 50%;
     상단 : 50%;
     변환 : 번역 (-50%, -50%);
   }

   이 예에서 .tag는 상대 위치 지정 컨테이너로 설정되며 .Text는 절대 포지셔닝으로 설정됩니다. 왼쪽 : 50%및 상단 : 50%, 텍스트의 왼쪽 상단 모서리를 컨테이너 중앙으로 이동 한 다음 변환을 사용하여 다음을 사용하여 (-50%, -50%) 텍스트를 폭과 높이의 상단 절반으로 이동하여 중심 효과를 달성합니다.

위의 두 가지 방법을 통해 디자인 드래프트의 작은 태그 효과는 모바일 터미널에서 효과적으로 실현 될 수 있으며 Android 및 Apple 장치에서 일관된 수직 중심 효과를 유지할 수 있습니다.

위 내용은 모바일 터미널의 설계 초안에서 작은 레이블 효과를 정확하게 인식하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!