Div 내부의 두 요소를 수평 및 수직 중앙에 어떻게 배치할 수 있습니까?

버전 div 내에서 두 요소를 수평으로 가운데에 배치

제공된 코드 조각에서 div 내의 요소를 수직으로 가운데에 배치하는 문제가 발견되었습니다. 제안된 튜토리얼을 사용해도 문제가 해결되지 않은 것 같습니다.

Flexbox 솔루션:

div 내에서 요소를 수직 및 수평으로 정렬하는 Flexbox 속성을 구현하십시오.

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

테이블 및 위치 지정 해결 방법:

또는 요소 위치 지정을 위한 CSS 테이블과 위치 지정 조합 사용을 고려하세요.

#container {
  display: table;
  vertical-align: middle;
}

.banner {
  display: table-cell;
}

방법 선택 고려 사항:

두 가지 접근 방식 중 하나를 선택할 때 다음 사항을 고려하세요. 요소:

• 단순성: Flexbox는 요소 중앙 정렬을 위해 더욱 간결한 코드를 제공합니다.
• 브라우저 지원: Flexbox는 주요 브라우저에서 지원됩니다. 테이블 및 위치 지정 방법에는 공급업체 접두사가 필요할 수 있습니다. 호환성.
• 반응성: Flexbox는 반응형 레이아웃을 지원하므로 요소를 다양한 화면 크기에 맞게 조정할 수 있습니다.

추가 권장사항:

• margin: auto 속성을 사용하여 요소를 수평으로 중앙에 배치하세요.
• 단락 내 텍스트가 세로 중앙에 오도록 .bannerrightinner 클래스의 상단 여백을 조정합니다.

위 내용은 Div 내부의 두 요소를 수평 및 수직 중앙에 어떻게 배치할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!