CSS의 Div 내에서 범위를 수직으로 가운데에 맞추는 방법은 무엇입니까?

Div 내에서 범위를 수직으로 가운데에 맞추는 방법

CSS에서는 수직 정렬이 어려울 수 있으며 div 내에서 범위를 정렬하는 것은 불가능합니다. 예외.

CSS 정렬 이해

솔루션을 살펴보기 전에 CSS의 수직 정렬을 이해하는 것이 중요합니다.

• 자연 정렬: 인라인 요소(span 등)는 가장 낮은 문자의 아래쪽인 기준선에 자연스럽게 정렬됩니다.
• 줄 높이: 줄 -height 속성은 문자와 선행 공백을 모두 포함하는 줄 상자의 높이를 설정합니다.
• 기본 높이: 요소의 고유 높이는 공백 없이 차지하는 공간입니다. 스타일링 또는 패딩.

세로 정렬 기술

div 내에서 범위를 세로로 가운데에 맞추려면 다음 기술을 고려하세요.

1. 줄 높이를 컨테이너 높이와 일치:

범위의 줄 높이를 div의 높이와 일치하도록 설정합니다. 예를 들어 div 높이가 15px인 경우 line-height: 15px를 설정합니다. 스팬에.

2. 절대 위치 지정:

위치 설정: 절대; div 및 위치: 절대; 최고: 50%; 범위에. 그런 다음 스팬의 margin-top 값을 고유 높이의 절반으로 조정합니다.

3. 변환:translateY

변환 사용:translateY(-50%); 범위의 속성입니다. 이렇게 하면 스팬이 고유 높이의 절반만큼 수직으로 이동합니다.

4. Flexbox

Flexbox를 활용하여 범위를 수직으로 중앙에 배치합니다. 디스플레이 설정: 플렉스; 항목 정렬: 중앙; div 및 여백: auto;

코드 샘플

다음은 줄 높이 방법을 사용하는 예입니다.

<div id="theMainDiv" style="height: 15px; line-height: 15px;">
  <span id="tag1_outer">as</span>
</div>

위 내용은 CSS의 Div 내에서 범위를 수직으로 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!