텍스트와 이미지를 수직으로 정렬하는 방법은 무엇입니까?

Question

为什么 vertical-align: middle 不起작업용?然而, vertical-align: top 确实有效。

스팬{
  수직 정렬: 중간;
}

  
  작동하지 않습니다.

Answer 1

수직 정렬을 위한 몇 가지 간단한 기술은 다음과 같습니다.

한 줄 세로 정렬: 가운데

이것은 간단합니다. 텍스트 요소의 줄 높이를 컨테이너의 줄 높이와 동일하게 설정하세요

으아악

여러 줄 수직 정렬:하단

컨테이너를 기준으로 내부 div의 위치를 ​​절대적으로 지정하세요

으아악

여러 줄 수직 정렬:가운데

으아악

이전 버전의 IE <= 7을 지원해야 하는 경우<= 7

이 기능이 완전히 작동하려면 CSS를 일부 변경해야 합니다. 운 좋게도 우리에게 유리한 IE 버그가 있습니다. 컨테이너에 top:50% ，在内部 div 上设置 top:-50%를 설정하면 동일한 결과가 나타납니다. IE가 지원하지 않는 또 다른 기능인 고급 CSS 선택기를 사용하여 두 가지를 결합할 수 있습니다.

으아악

가변 컨테이너 높이 수직 정렬:중간

이 솔루션은 transform:translateY 속성을 사용하기 때문에 다른 솔루션보다 약간 더 최신 브라우저가 필요합니다. (http://caniuse.com/#feat=transforms2d)

다음 세 줄의 CSS를 요소에 적용하면 상위 요소의 높이에 관계없이 요소가 상위 요소 내에서 수직으로 가운데에 배치됩니다.

으아악

Answer 2

사실 이 경우는 매우 간단합니다. 이미지에 수직 정렬을 적용하면 됩니다. 모든 것이 한 줄에 있으므로 실제로는 텍스트가 아닌 이미지를 정렬하는 것입니다.

으아악