표시:테이블 셀 속성 연습

display:table-cell 속성은 label 요소가 td 태그와 유사하게 테이블 셀 형식으로 표시됨을 의미합니다. 현재 IE8+ 및 기타 최신 브라우저는 이 속성을 지원하지만 IE6/7은 죄송하다고만 말할 수 있습니다. 이 사실은 실제 프로젝트에서 display:table-cell 속성의 적용을 크게 제한합니다.

우리는 셀에 요소의 수직 중앙 정렬, 관련 크기 조정 등과 같은 몇 가지 특별한 속성이 있다는 것을 모두 알고 있습니다. 따라서 IE6/7에서는 이를 지원하지 않지만 display:table-cell에는 여전히 많은 잠재적인 사용 가치가 있습니다. 속성, 그러나 다행스럽게도 IE6/7에는 몇 가지 지저분한 속성과 렌더링이 있으며 다른 방법으로도 동일하거나 유사한 효과를 얻을 수 있습니다.

다른 표시 속성과 유사하게 table-cell은 float, position:absolute와 같은 다른 CSS 속성에 의해 파괴됩니다. 따라서 float:left 또는 position:absolute 속성과 함께 display:table-cell을 사용하지 마십시오. . 동일한 용도. display:table-cell이 설정된 요소는 너비에 매우 민감하고 여백 값에 반응하지 않으며 패딩 속성에 반응합니다. 기본적으로 td 태그 요소와 같습니다.

vertical-align 속성은 요소가 위치한 행의 기준선을 기준으로 인라인 요소 기준선의 수직 정렬을 정의합니다. 음수 길이 값과 백분율 값을 지정할 수 있습니다. 이렇게 하면 요소가 높아지는 대신 요소가 낮아집니다. 테이블 셀에서 이 속성은 셀 상자의 셀 내용 정렬을 설정합니다.

.box {
                                                                              | IE 이외의 주류 브라우저에서 인식*/                                        /*레벨 설정을 가운데로 설정*/ 5px;/*높이의 약 0.873,200 *0.873은 약 175*/
                                                                                                                                  0px; eee 수직 정렬:중간
} }

/div>

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.