wulin.com의 기사 소개 (www.vevb.com) : 그림을 수직으로 중심하는 방법.
그림의 너비와 높이는 알려져 있지 않으며 고정 크기가 없습니다. 이 전제에 따라, 그림을 고정 너비와 높이의 컨테이너에 수직 중앙에 두는 것은 매우 번거 롭습니다. 최근 프로젝트는이 솔루션을 사용할 수 있으므로 일반적으로 사용되는 몇 가지 방법을 수집하고 정렬했습니다.
다음 그림은 이상적인 렌더링입니다. 외부 컨테이너의 너비와 높이는 고정되어 있으며 중간의 그림의 너비와 높이는 알려져 있지 않지만, 그림은 항상 외부 용기에 비해 수직 중심에 있어야합니다.
그러나 실제로 구현 된 효과는 완벽하지 않습니다. 각 브라우저의 구문 분석은 다르기 때문에 각 브라우저의 편차는 1px-3px입니다.
방법 1 (XHTML 1.0 전환) :
이 방법은 외부 컨테이너의 디스플레이 모드를 표시하도록 설정하는 것입니다. 테이블, IMG 태그 외부의 스팬 태그를 둥지로 설정하고 스팬의 디스플레이 모드를 표시로 설정하여 테이블 셀을 테이블 요소처럼 쉽게 정렬 할 수 있도록하십시오. 물론 이것은 표준 브라우저에서만 가능하며 IE6/IE7도 포지셔닝을 사용해야합니다.
HTML 구조 부품 :
<div id = box>
<span> <img src = images/demo.jpg alt => </span>
</div>
CSS 스타일 부분 :
<스타일 유형 = 텍스트/CSS>
#상자{
너비 : 500px; 높이 : 400px;
디스플레이 : 테이블;
텍스트 정렬 : 센터;
테두리 : 1px 고체 #d3d3d3; 배경 : #fff;
}
#box span {
디스플레이 : 테이블 세포;
수직 정상 : 중간;
}
#box img {
국경 : 1px Solid #CCC;
}
</스타일>
<!-[LTE IE 7 인 경우]>
<스타일 유형 = 텍스트/CSS>
#상자{
위치 : 상대;
오버플로 : 숨겨진;
}
#box span {
위치 : 절대;
왼쪽 : 50%; 상단 : 50%;
}
#box img {
위치 : 상대;
왼쪽 : -50%; 상단 : -50%;
}
</스타일>
<! [endif]->
방법 2 (XHTML 1.0 전환) :
방법 2와 방법 1의 구현의 원리와 구조는 유사하며 구조는 동일하다. 방법 1은 조건부 주석을 사용하고 방법 2는 CSS 해킹을 사용합니다.
CSS 스타일 부분 :
<스타일 유형 = 텍스트/CSS>
#상자{
너비 : 500px; 높이 : 400px;
오버플로 : 숨겨진;
위치 : 상대;
디스플레이 : 테이블 세포;
텍스트 정렬 : 센터;
수직 정상 : 중간;
테두리 : 1px 고체 #d3d3d3; 배경 : #fff;
}
#box span {
위치 : 정적;
*위치 : 절대; /*IE6/7*/해킹
상단 : 50%; /*IE6/7*/해킹
}
#box img {
위치 : 정적;
*위치 : 상대; /*IE6/7*/해킹
상단 : -50%; 왼쪽 : -50%; /* IE6/7*/해킹
국경 : 1px Solid #CCC;
}
</스타일>
이 방법은 단점이 있습니다. 표준 브라우저에서는 외부 컨테이너 #box의 디스플레이 모드가 표시되므로 테이블 셀이므로 #box에는 마진 속성을 사용할 수 없으며 IE8의 테두리 설정도 유효하지 않습니다.
방법 3 (xhtml 1.0 엄격함) :
표준 브라우저는 여전히 외부 컨테이너 #box의 디스플레이 모드를 디스플레이 : 테이블 세포로 설정합니다. IE6/IE7은 IMG 태그 앞에 한 쌍의 빈 태그를 삽입하는 방법을 사용합니다.
HTML 구조 부품 :
<div id = box> <i> </i> <img src = images/demo.jpg alt => </div>
CSS 스타일 부분 :
<스타일 유형 = 텍스트/CSS>
#상자{
너비 : 500px; 높이 : 400px;
디스플레이 : 테이블 세포;
텍스트 정렬 : 센터;
수직 정상 : 중간;
테두리 : 1px 고체 #d3d3d3; 배경 : #fff;
}
#box img {
국경 : 1px Solid #CCC;
}
</스타일>
<!-[IF]>
<스타일 유형 = 텍스트/CSS>
#box I {
디스플레이 : 인라인 블록;
높이 : 100%;
수직 정상 : 중간
}
#box img {
수직 정상 : 중간
}
</스타일>
<! [endif]->
방법 3은 또한 XHTML 1.0 전이에도 적용됩니다. 위의 방법은 웹 교육 웹 사이트에서 수집됩니다. 당분간,이 세 가지 방법만이 매우 만족하고 호환성이 좋으며 한계는 비교적 작습니다. 나는 또한 일부 방법을 하나씩 테스트했지만 결과는 이상적이지 않으며 다른 브라우저마다 차이가 상당히 다릅니다. 또한 Situ Zhengmei도 여기에서 몇 가지 방법을 수집했습니다.
사고 : 많은 방법은 외부 컨테이너의 디스플레이 모드를 테이블로 설정하여 수직 센터링, 즉 테이블을 시뮬레이션하기위한 DIV에 의존합니다. CSS 가이 효과를 달성하기위한 재산이 있다면 얼마나 좋은가. 좋은 방법이 있다면 공유 할 수 있습니다.
원래의: