동적 크기 컨테이너에서 이미지를 수직으로 정렬하는 방법은 무엇입니까?

동적 높이 컨테이너에서 이미지를 수직으로 정렬

문제: 높이가 다음과 같은 반응형 컨테이너 내에서 이미지를 수직으로 정렬하는 방법은 무엇입니까? 브라우저에 따라 결정됩니다. 너비?

해결책:

1. 수직 정렬을 위해 인라인 요소 사용:

상위 요소 내에서 인라인 요소를 수직으로 정렬하려면 첫 번째 하위 요소로 블록 수준(의사) 요소를 생성하고 높이를 상위 요소의 100%로 설정합니다. . 추가적으로 의사 요소와 대상 이미지 요소에 vertical-align: middle을 적용하세요.

2. 이점:

• 동적 컨테이너 크기가 지원됩니다.
• 이미지 크기를 명시적으로 지정할 필요가 없습니다.
• 인라인 또는 div 요소를 수직으로, 글꼴 크기를 재설정하는 옵션 div 요소를 사용하여 콘텐츠를 표시합니다.

3. 세로 이미지 정렬이 포함된 반응형 컨테이너:

폭에 맞춰 높이가 조정되는 반응형 컨테이너를 만들려면

padding-top 속성에 백분율 값을 사용하세요.

4. 반응형 컨테이너에 콘텐츠 추가:

반응형 컨테이너 내의 래퍼 요소를 사용하여 콘텐츠를 보관합니다. 래퍼를 절대적으로 배치하고 확장하여 컨테이너 공간을 채웁니다.

HTML 코드:

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
    </div>
</div>

세로 정렬을 위한 CSS 코드:

.img-container {
    text-align: center;
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

반응형 CSS 코드 컨테이너:

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