높이와 너비가 정의된 div 내의 콘텐츠를 수직으로 정렬하려면 어떻게 해야 합니까?

지정된 Div 크기 내 콘텐츠의 수직 정렬

정의된 높이와 너비로 div 내의 콘텐츠를 수직으로 정렬하는 것은 웹 개발의 일반적인 요구 사항입니다. . 이러한 정렬을 달성하려면 다음 방법을 고려하십시오.

1. 상위 Div를 Table-Cell로 설정:

• 상위 div의 표시를 table-cell로 설정하고 수직 정렬을 가운데로 설정합니다.
• 이 솔루션은 다음과 같은 브라우저에서 콘텐츠를 수직으로 정렬합니다. 디스플레이 지원: 테이블 셀.

2. 블록 표시 및 콘텐츠가 테이블 셀로 포함된 상위 Div:

• 상위 div를 블록 요소로 유지하고 콘텐츠 표시를 테이블 셀로 설정합니다.
• 이것은 메서드는 테이블 셀을 보유하는 상위 div의 능력에 의존합니다.

3. 상위 Div 플로팅 및 콘텐츠 Div를 테이블 셀로 사용:

• 상위 div를 플로팅하고 콘텐츠 div의 표시를 테이블 셀로 설정합니다.
• 이 접근 방식은 수정하지 않고 정렬을 달성합니다. 상위 div의 표시 속성

4. 상대 위치가 있는 상위 Div 및 절대 위치가 있는 콘텐츠:

• 상위 div를 상대적으로 배치하고 콘텐츠 div를 절대적으로 설정합니다.
• top:50을 설정하여 콘텐츠를 세로로 가운데에 배치합니다. 콘텐츠 div의 % 및 margin-top:-50%.
• 이 방법은 특정 항목에 대한 정확하지만 수동 정렬을 제공합니다. 시나리오.

위 내용은 높이와 너비가 정의된 div 내의 콘텐츠를 수직으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!