"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 높이와 너비가 정의된 div 내의 콘텐츠를 수직으로 정렬하려면 어떻게 해야 합니까?

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

2024년 11월 14일에 게시됨
검색:280

How can I vertically align content within a div with defined height and width?

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

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

1. 상위 Div를 Table-Cell로 사용:

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

2. 블록 표시 및 콘텐츠가 Table-Cell로 포함된 상위 Div:

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

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

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

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

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

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3