CSS에서 동적으로 크기가 조정된 Div를 수직으로 정렬하는 방법은 무엇입니까?

CSS에서 동적으로 크기가 지정된 Div의 세로 정렬

div 컨테이너의 세로 정렬은 div의 높이와 너비를 미리 알 수 없는 경우 문제가 될 수 있습니다. . 이는 div에 이미지나 Flash 객체가 포함된 경우에 자주 발생할 수 있습니다.

동적 크기를 사용한 수직 정렬

이 시나리오에서 수직 정렬을 달성하려면 다음과 같은 힘을 활용할 수 있습니다. CSS2의. 이 솔루션에는 트릭이나 해킹이 필요하지 않으며 CSS 원칙에만 의존합니다.

정렬의 핵심은 vertical-align: middle 및 line-height: 0 컨테이너('center') 내의 하위 요소('wrap')에 적용됩니다. 그러나 이 작업을 수행하려면 컨테이너의 줄 높이가 고정되어 있어야 합니다.

HTML 구조:

<code class="html"><span id="center">
    <span id="wrap">
        <img src="image.png" alt="" />
    </span>
</span></code>

CSS 스타일:

<code class="css">#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

#wrap img {
    vertical-align: middle;
}</code>

구현 세부정보:

• 컨테이너 위치: 'center' div에 상대 위치가 지정되고 수직으로 정렬됩니다. 상위 컨테이너의 50%. 정렬을 위한 충분한 공간을 보장하기 위해 높이는 2000px로 설정됩니다.
• 줄 높이를 0으로 설정: 'wrap' div의 줄 높이가 0으로 설정되어 줄 사이의 공백을 효과적으로 제거합니다. .
• 중간 정렬: 'wrap' div의 하위 이미지는 'vertical-align: middle'을 사용하여 중앙에 수직으로 정렬됩니다.

호환성

이 솔루션은 IE8, Opera, Safari, Firefox 및 Chrome에서 테스트되었습니다.

IE7 주의 사항:

IE7 , 적절하게 정렬하려면 가장 안쪽 두 요소를 한 줄로 결합해야 합니다.

위 내용은 CSS에서 동적으로 크기가 조정된 Div를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!