너비를 모르고 Div 블록을 중앙에 배치하는 방법은 무엇입니까?

폭 제약 없이 Div 블록을 중앙에 배치

너비를 모르고 div 블록을 중앙에 배치하는 것은 어려울 수 있습니다. 이 문서에서는 두 가지 효과적인 솔루션을 제공하여 이 문제를 해결합니다.

솔루션 1: 인라인 블록 및 텍스트 정렬

이 솔루션에는 항목을 디스플레이로 중앙에 배치하도록 설정하는 작업이 포함됩니다. : inline-block 및 해당 상위 컨테이너는 text-align: center입니다. 이 접근 방식은 브라우저에서 인라인 블록 요소를 처리하는 방식에 의존합니다.

CSS:

.child {
  display: inline-block;
}

.parent {
  text-align: center;
}

해결책 2: 상대 위치 지정

이 솔루션은 상대 위치 지정을 사용하여 콘텐츠를 중앙에 배치합니다. 여기에는 두 개의 div(외부 div와 내부 div) 안에 중앙에 있는 콘텐츠를 래핑하는 작업이 포함됩니다.

HTML:

<div>

CSS:

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

.clear {
  clear: both;
}

외부 div는 오른쪽에 떠 있고 오른쪽 가장자리는 상위 가장자리의 50% 위치에 있습니다. 내부 div도 오른쪽으로 부동되어 있지만 오른쪽 가장자리는 외부 div의 오른쪽 가장자리에서 -50% 위치에 위치하므로 내부 div와 해당 콘텐츠가 상위 div 내에서 효과적으로 중앙에 배치됩니다.

결론

두 솔루션 모두 너비를 미리 알지 못한 채 div 블록을 중앙에 배치하는 효과적인 방법을 제공합니다. 어떤 솔루션을 사용할지는 프로젝트의 특정 요구 사항과 제약 조건에 따라 선택됩니다.

위 내용은 너비를 모르고 Div 블록을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!