CSS 투명 부모 상자에서 변경되지 않은 텍스트 위치로 수직으로 하위 박스를 달성하는 방법은 무엇입니까?

CSS 레이아웃에서는 투명성과 텍스트를 포함하는 모체 상자를 달성하는 동시에, 자식 상자를 부모 상자 내에서 수직 중앙에 놓고 텍스트 위치를 변경하지 않도록하는 방법은 무엇입니까? 이것은 일반적인 CSS 레이아웃 문제입니다. 이 기사는이 문제를 해결하고 특정 CSS 코드 예제를 제공하는 방법을 자세히 설명합니다.

문제의 핵심은 부모 상자가 투명성으로 설정 될 때 부모 상자의 텍스트 내용에 영향을 미치지 않고 자식 상자를 수직으로 중앙으로 중앙으로 중앙으로 중앙으로 중앙에있는 방법에 있습니다 (불투명도 : 0.2). 불투명 속성을 사용하면 아동 요소가 투명성을 물려 받게됩니다. 이는 우리의 요구와 상반됩니다.

솔루션의 핵심은 절대 포지셔닝과 변환을 사용하는 것입니다 : Translatey (-50%). 먼저, 아동 요소를 절대 위치 (위치 : 절대)로 설정하여 문서 스트림에서 분리되어 부모 요소에 따라 위치 할 수 있도록해야합니다. 그런 다음 상단 : 50%를 부모 요소의 높이의 절반으로 이동 한 다음 Transform : Translatey (-50%)를 사용하여 하위 요소를 높이의 절반으로 위로 이동시켜 수직 중심을 달성합니다.

상위 요소의 투명성에 관해서는 모든 아동 요소의 투명성에 영향을 미치기 때문에 불투명 속성을 사용해서는 안됩니다. 대신, 부모 요소의 배경색은 배경색과 같은 rgba () 색상 값을 사용하여 설정해야합니다 : RGBA (255, 255, 255, 0.2); 이는 아동 요소의 투명성에 영향을 미치지 않으면 서 부모 요소의 투명성을 달성합니다.

따라서 최종 CSS 코드는 다음 구조와 유사해야합니다 (실제 상황에 따라 특정 스타일을 조정해야합니다).

 .parent {
  위치 : 상대; /* 부모 요소는 상대 위치로 설정해야합니다*/
  배경색 : RGBA (255, 255, 255, 0.2); /* RGBA를 사용하여 투명성을 설정하십시오*/
}

.어린이 {
  위치 : 절대;
  상단 : 50%;
  왼쪽 : 50%;
  변환 : 번역 (-50%, -50%); /* 수직 및 수평 센터*/
}

상기 방법을 통해, 부모 박스의 투명성과 텍스트 위치는 변경되지 않은 상태로 유지하면서 서브 박스의 수직 중심 효과를 달성 할 수 있습니다. 왼쪽 속성을 조정하면 수평 센터링을 달성하고 변환 할 수 있습니다. 번역 (-50%, -50%)은 동시에 수평 및 수직 센터링을 달성 할 수 있습니다.

위 내용은 CSS 투명 부모 상자에서 변경되지 않은 텍스트 위치로 수직으로 하위 박스를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!