여러 브라우저에서 고정 크기 Div 내의 콘텐츠를 수직으로 정렬하는 방법은 무엇입니까?

정의된 Div 내 수직 정렬

질문:

콘텐츠를 수직으로 정렬하는 방법 지정된 너비와 높이를 가진 div 내에서 브라우저 전체에 걸쳐 균일성을 보장하고 테이블 셀을 방지합니다. 솔루션?

답변:

이 시나리오에서 수직 정렬을 달성하는 방법에는 여러 가지가 있습니다.

버전 1: 디스플레이가 있는 상위 Div as Table-Cell

이 접근 방식에는 상위 div의 표시 속성을 다음으로 설정하는 작업이 포함됩니다. table-cell 및 Vertical-align:middle을 사용하여 콘텐츠를 세로로 정렬합니다.

버전 2: 디스플레이 블록 및 콘텐츠 표시 Table-Cell이 있는 상위 Div

여기서 상위 div는 표시 블록으로 설정되고 콘텐츠 div에는 표시 테이블 셀이 할당되고 수직 정렬은 수직 정렬로 이루어집니다. middle.

버전 3: 상위 Div 플로팅 및 디스플레이 테이블 셀로서의 콘텐츠 Div

이 방법에서는 상위 div가 플로팅되고 콘텐츠 div가 다음으로 설정됩니다. 수직 정렬을 사용하여 수직 정렬이 적용된 테이블 셀 표시: 중간.

버전 4: 상위 Div 콘텐츠 절대 위치와 상대 위치

이 접근 방식에는 특정 구현에 대한 정확한 계산이 필요합니다. 상위 div는 상대적으로 배치되고, 콘텐츠 div는 상단이 50%, 높이가 50%로 설정되고, margin-top이 콘텐츠 div 높이의 절반으로 음수 기호로 계산되어 절대적으로 배치됩니다.

위 내용은 여러 브라우저에서 고정 크기 Div 내의 콘텐츠를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!