CSS는 알 수 없는 높이 수직 centering_CSS/HTML을 해결합니다.

WBOY
풀어 주다: 2016-05-16 12:12:03
원래의
1190명이 탐색했습니다.

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을 통과했습니다.






유효한 CSS의 수직 중앙 정렬
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿