동적으로 생성된 콘텐츠로 Div 블록을 중앙에 배치하는 방법은 무엇입니까?

동적 크기의 Div 블록 중앙에 배치

문제:

Div 블록을 중앙에 배치 너비를 미리 아는 것은 어려울 수 있습니다. 기존 방법은 고정된 너비에 의존하며 이는 콘텐츠가 동적으로 생성되는 경우에는 불가능합니다.

해결책 1(권장): 인라인 블록 접근 방식

인라인 블록 활용 블록 및 텍스트 정렬 속성을 사용하면 상위 컨테이너 내의 요소를 중앙에 배치할 수 있습니다.

.child {
  display: inline-block;
}
.parent {
  text-align: center;
}

이 접근 방식 자체 너비를 기준으로 하위 요소를 중앙에 배치하여 동적 콘텐츠에 반응하도록 합니다.

해결책 2: 중첩된 상대 위치 지정

이 방법은 상대 위치 지정과 함께 중첩된 div를 사용합니다.

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"></div>
</div>

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

바깥쪽 div는 오른쪽에서 50%, 안쪽에서 위치합니다. div는 오른쪽에서 -50% 위치에 배치되어 콘텐츠 중앙에 효과적으로 배치됩니다.

위 내용은 동적으로 생성된 콘텐츠로 Div 블록을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!