CSS를 사용하여 동적으로 크기가 지정된 Div를 수직으로 정렬하는 방법은 무엇입니까?

CSS를 사용하여 동적으로 크기가 지정된 Div의 수직 정렬

CSS 세계에서는 완벽한 정렬을 달성하는 것이 어려울 수 있습니다. 특히 알 수 없거나 동적 크기의 div. 다음 시나리오를 생각해 보십시오. 이미지 또는 플래시 개체가 포함된 div가 있고 컨테이너 또는 하위 크기에 관계없이 상위 컨테이너 내에서 수직으로 정렬하려고 합니다.

해결책:

CSS는 이러한 딜레마에 대한 우아한 솔루션을 제공합니다. Vertical-align: middle과 line-height: 0의 조합을 활용하면 불확실한 크기의 컨테이너 내에서 수평 및 수직 중앙 정렬을 모두 달성할 수 있습니다.

HTML 구조:

<code class="html"><span id="center">
  <span id="wrap">
    <img src="http://lorempixum.com/300/250/abstract" alt="" />
  </span>
</span></code>

CSS 스타일:

<code class="css">html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#center {
  position: relative;
  display: block;
  top: 50%;
  margin-top: -1000px;
  height: 2000px;
  text-align: center;
  line-height: 2000px;
}
#wrap {
  line-height: 0;
}
#wrap img {
  vertical-align: middle;
}</code>

설명:

• vertical-align: 중간은 이미지를 수직으로 정렬합니다. 높이에 관계없이 #wrap 요소.
• line-height: 0은 #wrap 요소의 기본 줄 간격을 제거하여 고유한 높이가 없도록 합니다.
• 텍스트를 설정하여- align: center 및 line-height를 원하는 컨테이너 높이에 맞춰 컨테이너 내에서 이미지를 수직으로 정렬하는 기준선을 설정합니다.
• #center 요소는 상위 컨테이너 내에서 컨테이너를 수직으로 배치하는 데 사용되며 중앙에 배치됩니다. CSS 변환을 사용합니다.

Internet Explorer 7에 대한 참고 사항: IE7과의 호환성을 보장하려면 가장 안쪽 요소(#wrap 및 )는 이 수정된 항목에 설명된 대로 한 줄에 선언되어야 합니다. HTML 구조:

<code class="html"><span id="center">
  <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span></code>

이 순수한 CSS2 솔루션은 이미지, 플래시 개체 또는 기타 요소가 포함되어 있는지 여부에 관계없이 동적 크기를 가진 div에 대한 안정적인 정렬을 제공합니다.

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