집 > 기사 > 웹 프론트엔드 > CSS는 알 수 없는 높이 수직 centering_CSS/HTML을 해결합니다.

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

WBOY원래의: 2016-05-16 12:12:031197검색

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의 수직 중앙 정렬


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
  </title>
    <style type="text/css"> 
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;} 
body,html{height: 100%; } 
a{color: #333;} 
a:hover{color: green;} 
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; } 
#outer[id] {display: table; position: static;} 
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/ 
#middle[id] {display: table-cell; vertical-align: middle; position: static;} 
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */ 
div.greenBorder {border: 1px solid green; background-color: #FFF;} 
p{margin: 1em;} 
    </style>
      기본 길이<div id="outer"> <div id="middle">더 긴 페이지<div id="inner" class="greenBorder">
<p>
      <a href="javascript:toggleContent('inner',1)"> 1. Illustrator를 열고 새 파일을 만든 다음 가져오려는 그림보다 큰 직사각형을 그린 다음 흰색으로 채웁니다. 
 
        2. 직사각형을 선택하고 메뉴: 효과 > 왜곡 및 변형 > 지그재그를 아래와 같이 설정합니다. 
 
        3. 메뉴: 효과 > 스타일화 > 그림자, 아래와 같이 설정합니다. 
 
        1. Illustrator를 열고 새 파일을 만든 다음 가져오려는 그림보다 큰 직사각형을 그린 다음 흰색으로 채웁니다. 
 
        2. 직사각형을 선택하고 메뉴: 효과 > 왜곡 및 변형 > 지그재그를 아래와 같이 설정합니다. 
 
        3. 메뉴: 효과 > 스타일화 > 그림자, 아래와 같이 설정합니다. </a>
      <a href="javascript:toggleContent('inner',2)">
      </a>Forestgan</p>이 디자인함 이 데모는 <p>Creative Commons License</p>에 따라 라이센스가 부여되며 저작자 표시 및 비상업적 사용이 가능합니다. 
      <address style="text-align:center; padding: .5em; clear: left;">
    <a href="http://www.forest53.com">
  </a>
<a href="http://www.creativecommons.cn/">


<br><input onclick="runEx('runcode63300')" type="button" value="运行代码"> <input onclick="doCopy('runcode63300')" type="button" value="复制代码"> <input onclick="doSave(runcode63300)" type="button" value="保存代码">[Strg+A, um alle auszuwählen. Hinweis: </a><a href="/article/23421.htm" title="查看具体详情" target="_blank">Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen </a>]</address>
</div>
<br>
</div>
</div>
성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

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

관련 기사