순수 CSS를 사용하여 크기를 알 수 없는 이미지의 수직 중앙 정렬 예에 대한 자세한 설명

1. 타오바오의 방법

저번 "타오바오 UED 모집"에 이런 질문이 있었습니다.

"순수 CSS를 사용하여 크기를 알 수 없는 이미지(단, 높이와 너비가 200px 미만)를 200px 정사각형 컨테이너에 구현합니다. "

물론 질문은 임의적이지는 않지만 나름의 실용적인 이유가 있습니다. 수직 센터링은 타오바오 작업에서 가장 흔히 접하는 문제이며 매우 대표적인 문제입니다.

질문의 난이도는 두 가지 점에 있습니다.

수직 중심
그림은 몇 가지 특별한 특성을 지닌 대체 요소입니다.
이 문제를 해결하는 방법은 상대적으로 구조적으로 깨끗하고 CSS로 간단한 해결 방법을 사용하는 것입니다.

.box {

display: table-cell;
Vertical-align:middle;

text-align: center;

*display: block;
*font-size: 175px;
*font-family:Arial;

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {

Vertical-align:middle;
}

2. 배경 방법

이 방법도 매우 간단하지만 페이지에 필요한 경우

라는 태그를 추가해야 합니다. 또는 중앙에 두 장의 사진이 있는 경우 이 방법을 권장하지만, 제품 사진이 많으면 추가할 태그 수가 더 많아집니다

다른 솔루션, 관심 있는 친구는 클릭할 수 있습니다:

div{
Height: 400px;
line-height : 400px;
overflow: Hidden;
}

이 방법은 텍스트 한 줄 또는 이미지 + 텍스트에만 적용 가능하며 일반적으로 앞에 작은 아이콘이 있는 링크나 제목에 사용됩니다. .

위 내용은 순수 CSS를 사용하여 크기를 알 수 없는 이미지의 수직 중앙 정렬 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!