CSS에 대한 자세한 소개 수직 정렬에 대한 심층적 이해

강의 1: 수직 정렬 패밀리의 기본 이해

수직 정렬이 지원하는 속성 값과 구성 이해

속성:

1. 상속

                                                                                    라인 클래스

> ~                                                                              위 첨자 및 아래 첨자 카테고리

0px,2em,20%

                                                                                                                                                                                    모두 음수 여백 지원, 문자 간격 단어 간격 수직 정렬, 동작은 일관됩니다. 해당 숫자 크기는 기준선 정렬을 기준으로 위아래로 오프셋됩니다.

         수직 정렬 백분율 값은 줄 높이를 기준으로 계산됩니다.

2강 수직 정렬이 작동하기 위한 전제 조건

다양한 표시 값이 수직 정렬에 미치는 영향에 대해 토론

수직 정렬이 작동하려면 조건이 있습니다 . 애플리케이션 인라인 레벨 및 테이블 셀 요소

인라인 레벨 요소

imgspanstrongem

인라인 블록 입력

테이블 셀 요소

.table-cell:

기본 상태: 그림, 버튼, 텍스트, 셀

1.display: 요소 표시 변경 Level

2.css는 요소 변경의 표시 수준을 선언합니다.

P 레이블 설정의 IMG 태그가 Vertical-Align: Middle 그림이 중간에 있지 않습니다.

하지만 너무 짧고 중앙에 위치하지 않음

실제 전투: 여러 줄의 텍스트 및 그림을 세로 중앙에 배치

                         텍스트

                                                                        

                                                                                세로 -정렬:210px; }

.test-list > img{vertical-align:middle;}

강의 3 수직 정렬과 ling-height

수직- 정렬 비율은 줄 높이 값을 기준으로 계산됩니다.                                       수직 정렬:-10%;

} 수직 정렬=-3px과 동일

인라인 이미지 하단에 공백이 있습니다. 해결 방법은 줄 높이를 제거하거나 수직 정렬 속성을 하단, 상단, 중간으로 변경하는 것입니다.

현상의 기본 파생: 수직 센터링

Vertical-align:middle;line-height:36px;

라벨의 줄 높이가 이미지보다 크게 설정되면 이미지가 대략 수직 중앙에 배치됩니다.

4장 수직 정렬 선 속성 값에 대한 심층적 이해

하단 라인, 상단 라인, 중간 라인의 동작

수직 정렬:하단

1.inline/inline-block 요소: 요소의 하단을 전체 행의 하단에 정렬

2.table-cell 요소: 셀의 패딩 가장자리를 행의 하단에 정렬 table row

수직 정렬: TOP

수직-중간

1.inline/Inline-Block 요소: 요소의 수직 중심점과 상위 요소 기준선 1 /2 x 높이 정렬

2 2 .table-cell 요소: 셀 패딩 상자는 외부 테이블 행을 기준으로 중앙에 위치합니다.

대략적인 수직 중심 값

수직 -align:text-top/text-bottom

정의

1.vertical-algin:text-top

상자의 상단 및 상위 센터 - 영역 상단 정렬

2.vertical-align:text-bottom

상자 하단은 상위 콘텐츠 영역의 하단과 정렬됩니다.

1. 수직 정렬 요소의 위치는 이전 및 이후의 요소와 관련이 없습니다. 글자크기는 글자크기와 관련이 없습니다.

실제 효과

이모티콘 사진 및 텍스트 정렬 효과 그림(16x16)

                                                                                                          ~                                                 정확한 글꼴 크기 및 낮은 호환성 요구사항

줄 높이 및 기타 인라인 요소에 영향을 받지 않는 것이 더 적절합니다.

제6장 세로- 위 첨자 및 아래 첨자 클래스 정렬

1. html의 위 첨자

2. html의 아래 첨자

더 작은 크기는 원본의 75%입니다. 글꼴 크기

1. ^{-->vertical-align:super}

2. _{-->vertical-align:sub}

정의

1.vertical-align:super

상자의 기준선을 부모의 적절한 위첨자 기준선 위치로 올립니다.

2.vertical-align:sub

상자의 기준선을 부모의 적절한 아래 첨자 기준선 위치로 내립니다.

실제 적용

7장: 수직 정렬의 불일치 메커니즘

수직 정렬이 서로 다른 인접 요소의 동작

언제 등장 전후 일관성 없음,

현재 요소와 아버지 수준을 따르며,

직접적인 영향을 미치지 않았습니다

8번째 수직 정렬 호환성이 좋지 않습니다

IE6/7

파이어폭스/크롬

위 내용은 CSS에 대한 자세한 소개 수직 정렬에 대한 심층적 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!