도구 설명을 상대 상위 항목에 정렬

Question

이 문제를 해결하기 위해 이틀을 보냈지만 혼자서는 할 수 없다는 것을 깨달았습니다. 내 툴팁을 부모를 기준으로 중앙에 맞추려고 합니다. 이것은 내 코드입니다 =>

으아악 으아악 으아악

예상 결과는 이렇겠죠 =>

도와주실 수 있나요? float、text-align、justify-content、margin: 0 auto를 사용해 보았는데 모든 것이 집중되어 있었지만 아무것도 작동하지 않았습니다

감사합니다.

Answer 1

해결책을 찾은 것 같습니다. 나는 다음을 추가했습니다:

으아악

모든 것을 중앙에 두세요:

으아악

세로 오프셋.

으아악 으아악 으아악

Answer 2

중심 참조가 필요한 요소를 상대 요소로 설정합니다. 귀하의 경우에는 .btnClass 과 일관성을 유지하고 싶습니다. 이런 방식으로 클래스는 내용을 래핑할 수 있습니다.

으아악

그런 다음 툴팁을 중앙에 배치할 수 있습니다. 변형 속성이 요소 자체의 -50%를 이동하도록 왼쪽 위치를 50%，并使用 transform 和 translateX(-50%)로 정의합니다. 이는 이미 왼쪽으로 50%이므로 결과는 완벽하게 정렬됩니다.

으아악

최종 결과:

으아악 으아악 으아악