전단 기술 의 CSS 구현 그림 수직 가운데

전단 기술 의 CSS 구현 이미지 수직 가운데 기술
maybe yes 2015 - 03 - 14 18: 52 발표
원본 링크:http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  LMLPHP 뒷마당
그림 을 수평 으로 가운데 로 두 는 것 이 간단 합 니 다. 부모 용기 에 속성 text - align 을 center 로 추가 하면 됩 니 다.순수 CSS 를 사용 하여 그림 의 수직 가운데 에 있 습 니 다. 그림 패키지 용기 의 display 속성 을 table - cell 로 설정 한 다음 vertical - align: middle 을 추가 하면 됩 니 다.table - cell 의 디 스 플레이 효 과 는 table 과 같 고 호환성 이 좋 기 때문에 table 로 그림 을 감 싸 는 것 도 같은 효과 입 니 다. 개인 적 으로 table 을 사용 하 는 것 이 좋 을 것 이 라 고 생각 합 니 다. DIV 가 table - cell 로 표시 되면 사 이 드 거 리 를 조절 하기 어렵 습 니 다.
위의 일 을 완성 한 것 을 제외 하고 그림 자체 도 처리 해 야 한다. 보통 중간 에 표시 해 야 할 그림 의 크기 와 비례 는 일치 하지 않 는 다.이러한 상황 에서 그림 태그 자체 의 width 와 height 속성 을 제거 한 다음 max - width 와 max - height 속성 을 설정 하면 됩 니 다.
CSS 를 사용 하여 그림 의 가운데 표 시 를 실현 하 는 것 외 에 그림 의 높이 와 너비 속성, 표시 구역 의 크기 에 따라 그림 의 margin - top 속성 이 정상 적 인 오프셋 위 치 를 계산 할 수 있 습 니 다.이런 방법 은 비교적 번거롭다. 왜냐하면 모든 그림 을 계산 해 야 하기 때문에 그림 의 너비 와 높 은 속성의 정확성 을 확보 하기 어렵 고 그림 의 변형 을 초래 할 수 있다.
한 사이트 의 가치 가 높 을 수록 수요 도 많아 지고 중간 사진 만 으로 는 좋 은 시각 적 체험 을 줄 수 없다.예 를 들 어 QQ 공간 은 이미지 에 대해 디 스 플레이 최적화 처 리 를 했 는데 만약 에 이미지 에 사람의 얼굴 이 있 으 면 미리 보기 그림 에서 사람의 얼굴 부분 을 돋 보이 게 할 수 있다. 이런 이미지 인식 기술 은 서버 의 지원 이 필요 하 다.
그림 가운데 에 있 는 부분 코드 를 첨부 합 니 다.

<style>
.imgTab{
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
}
.imgTab td{
    padding: 5px;
}
.imgWrap {
    width: 200px;
}
.imgWrap img{
    max-height: 200px;
    max-width: 200px;
}
</style>

<table class="imgTab">

    <tr>
        <td>
            <div class="imgWrap">
                <img src="" />
            </div>
        </td>
    </tr>

</table>

평론 을 읽다