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

CSS: 동적 크기에 따른 Div의 수직 정렬

이미지나 플래시 등 동적 콘텐츠가 포함된 div 요소로 작업할 때 수직적으로는 어려울 수 있습니다. 고정 높이 설정이나 절대 위치 지정과 같은 기존 방법은 이러한 상황에서는 적합하지 않을 수 있습니다.

다행히 CSS는 알려진 크기 없이 수직 정렬을 허용하는 솔루션을 제공합니다. 이 솔루션은 Vertical-align: middle 및 line-height: 0의 조합을 기반으로 합니다.

HTML 구조

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

CSS 규칙

<code class="css">html, body {
    height: 100%;
    width: 100%;
    padding: 0;
}

#center {
    position: relative;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

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

작동 방식

• #center 요소의 줄 높이가 고정 값(예: 2000px)으로 설정되고 텍스트 정렬이 적용됩니다. 중앙으로 설정됩니다.
• #wrap 요소의 line-height는 0으로 설정됩니다.
• 이미지의 수직 정렬은 중간으로 설정되어 포함된 라인 내에서 수직으로 정렬됩니다. 요소.
• #center 요소의 여백은 요소 높이의 음수 절반이며, 시각적으로 요소를 뷰포트 중앙에 배치합니다.

이 기술은 대부분의 최신 기술에서 작동합니다. IE8을 포함한 브라우저이며 브라우저 해킹이 필요하지 않습니다. 이는 동적 크기로 div 요소를 수직으로 정렬하기 위한 깔끔하고 다양한 솔루션을 제공합니다.

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