3 개의 CSS div 그림 수직 센터 코드

이 문서 수집 3 CSS 자습서 div 그림 수직 센터 코드 오, 그는 수 세로 Div 센터 또한 그림을 세로로 센터 오, 괜 찮 아 요,이 수직으로 중심으로 인스턴스 코드를 살펴보겠습니다.

cssbox 없음
/ * 비 IE 커널 브라우저 인식 수직 센터 * *
디스플레이: 테이블-셀;
수직 정렬: 중간;
/ * IE 커널 브라우저 인식 수직 센터 * *
* 디스플레이: 블록;
* *에 대해 0.873, 높이 200 * 0.873 약 175 * *
* 글꼴-크기: 175px;
텍스트-정렬: 센터;
폭: 200px;
높이: 200px;
}
. Cssbox img 없음
수직 정렬: 중간;
}
방법 2

<! doctype HTML 공공 / / w3c / / dtd 엄격한 XHTML 1.0 / / en "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD"
< html xmlns = "http://www.w3.org/1999/xhtml"
< 머리 & gt
< 메타 http-equiv = "콘텐츠 유형" 콘텐츠 = "text/html; 문자셋 = utf-8 "/ & gt
< 제목 > www.jzread.com</title>
< 유형 스타일 =" Text/css "
<!-
* {margin: 0; padding: 0}
div {
폭: 500px; 높이: 500px

라인-높이: 500px;
국경: 1px 단단한 #ccc;
오버플로우: 숨겨진;
위치: 상대;
텍스트-정렬: 센터;
}
Div p {+ 위치: 절대

위치: 정적

탑: 50% 수직 정렬: 중간
}
img {+ 위치: 상대

위치: 정적
가기:-50%; 왼쪽:-50%;
폭: 200px;
높이: 90px;
수직 정렬: 중간
}

; < / 스타일 & gt
< / 헤드 > < 몸 >

< div >< p ><IMG src = "/skins/logo3.gif"/ >< /p >< / div & gt
< / 바디 >
< / html >
방법 3

<! doctype HTML 공개 "-//W3C//DTD XHTML 1.0 엄격한 / / 엉" "Http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
< html xmlns = "http://www.zhutiai.com/1999/xhtml" >
< 헤드 >
< 메타 http-equiv = "content-type" 내용 = "text/html; charset = gb2312 "/ >
< 제목 > div + css 그림 수직 센터 < / 타이틀 >
< 스타일 형식을 "Text/css" = >
* {margin: 0 패딩: 0;
. imgbox {폭: 400px; 높이: 400px 여백: 30px; 국경: 1px 단단한 #ddd; 텍스트-정렬: 센터; 라인-높이: 400px;
. Imgbox img {수직 정렬: 중간;
* html. imgbox {글꼴-크기: 360px; 글꼴-가족: 굴림;}
</스타일 >
</헤드 >
< 몸 >
< div class = "Imgbox" >
< img src = "/article/uploadfiles/200907/20090717185022273.gif"/ >
< / div >
</바디 >
< / html >
1. 수직 센터 효과이 메서드에서 구현 엄격 모드 (DTD XHTML 1.0 Strict)에 적용 해야 합니다.

2. 표준 브라우저 (FF, 오페라, 크롬, IE8...)에 대 한 Imgbox img {수직 정렬: 중간; 그림은 수직으로 중심을 실현할 수 있습니다.

3. i e 7, 우리 사용할 수 있습니다 라인-높이: 400px 목표를 달성 하기 위해.

4. 나머지 6으로 * html imgbox {글꼴-크기: 360px; 글꼴-가족: 굴림; 달성 하기 위해. 중 360 = 400 * 90%, 400은 컨테이너의 높이, 90%는 기억 하기 쉽습니다 때문에, 정확한 값이 0.873. 어떻게이 숫자 값은 공부 하지 않은 특히로...

방법 3

<! doctype HTML 공개 "-//W3C//DTD XHTML 1.0 엄격한 / / 엉" "Http://mb.jzread.com/tr/xhtml1/dtd/xhtml1-strict.dtd" >
< 스타일 형식을 "Text/css" = >
div 없음
디스플레이: 테이블-셀;
높이: 300px;
폭: 500px;
텍스트-정렬: 센터;
국경: 1px 고체 #000;
수직 정렬: 중간
}
</스타일 >
<!-[경우 즉] >
< 스타일 형식을 "Text/css" = >
나 없음;
디스플레이: 인라인-블록;
높이: 100%;
수직 정렬: 중간
}
그림 없음
수직 정렬: 중간
}
</스타일 >
<! [endif] →
< div >
< i >< /i >
< img src = "/ img/logo.gif" alt = "/ >
< / div >