CSS 수직 정렬 기능이 있지만 높이를 알 수 없는 수직 센터링 문제(DIV 태그에 높이를 알 수 없는 텍스트나 이미지가 있는 경우)를 효과적으로 해결할 수 없습니다.
Mozilla, Opera, Safari 등의 표준 브라우저의 경우 상위 요소의 표시 모드를 TABLE(display: table;)로, 내부 하위 요소의 표시 모드를 table-cell(display: table-cell ), 수직 정렬 기능을 사용하여 수직으로 가운데에 배치하지만 비표준 브라우저에서는 이를 지원하지 않습니다.
비표준 브라우저에서는 하위 요소를 상단에서 50%로 설정한 다음 내부에 요소를 추가하여 상단에서 -50%만큼 오프셋할 수 있습니다.
body {padding: 0; margin: 0 ;}
body,html{높이: 100%;}
#outer {높이: 100%; 오버플로: 숨김; 위치: 상대;폭: 100%;}
#outer id] { 디스플레이: 테이블; 위치: 정적;}
#middle {위치: 절대; 상단: 50%;} /* 탐색기에만 해당*/
#middle[id] {display: table-cell; 수직 정렬 : 중간; 위치: 정적;}
#inner {위치: 상대; 상단: -50%;너비: 400px; 여백: 0 자동;} /* 탐색기에만 해당 */
div.greenBorder {테두리: 1px 단색 녹색; 배경색: 아이보리;}
xhtml
id="inner" 클래스 ="greenBorder">
CSS2 선택기 #value[id]는 IE에서 지원되지 않습니다.
CSS2 선택기 #value[id]는 선택기 #value와 동일하지만 Internet Explorer에서는 이러한 유형의 선택기를 지원하지 않습니다. 마찬가지로 .value[class]는 .value와 동일하며 표준 브라우저에서만 읽을 수 있습니다.
테스트: Firefox1.5, Opera9.0, IE6.0, IE5.0을 통과했습니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31