CSS에 대한 자세한 소개 수직 정렬에 대한 심층적 이해
- 高洛峰원래의
- 2017-03-22 15:03:131497검색
강의 1: 수직 정렬 패밀리의 기본 이해
수직 정렬이 지원하는 속성 값과 구성 이해
속성:
1. 상속
라인 클래스
> ~ 위 첨자 및 아래 첨자 카테고리 0px,2em,20%모두 음수 여백 지원, 문자 간격 단어 간격 수직 정렬, 동작은 일관됩니다. 해당 숫자 크기는 기준선 정렬을 기준으로 위아래로 오프셋됩니다. 수직 정렬 백분율 값은 줄 높이를 기준으로 계산됩니다. 2강 수직 정렬이 작동하기 위한 전제 조건 다양한 표시 값이 수직 정렬에 미치는 영향에 대해 토론 수직 정렬이 작동하려면 조건이 있습니다 . 애플리케이션 인라인 레벨 및 테이블 셀 요소 인라인 레벨 요소 imgspanstrongem 인라인 블록 입력 테이블 셀 요소 .table-cell:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!