CSS 중심 레이아웃 요약-CSS 튜토리얼-php.cn

CSS 중심 레이아웃 요약

php中世界最好的语言

풀어 주다： 2018-03-22 15:35:58

원래의

1715명이 탐색했습니다.

이번에는 CSS 중심 레이아웃에 대한 요약을 가져오겠습니다. CSS 중심 레이아웃의 주의 사항은 무엇인가요?

먼저 간단하고 무해한 센터링 방법에 대해 이야기하겠습니다

1. 여백을 auto

로 설정합니다. 구체적으로 요소의 margin-left와 margin-right를 모두 센터링하도록 설정합니다. 자동으로 설정됩니다. 이 방법은 수평 중심 정렬만 수행할 수 있으며 부동 요소 또는 절대 위치 요소에는 유효하지 않습니다.

2. text-align:center를 사용하세요

그림, 버튼, 텍스트와 같은 인라인 요소(인라인 또는 인라인 블록 등으로 표시됨)만 가로 중앙에 배치할 수 있습니다. 그러나 IE6과 7이라는 두 가지 이상한 브라우저에서는 모든 요소를 수평으로 중앙에 배치할 수 있다는 점에 유의해야 합니다.

3. line-height를 사용하여 한 줄의 텍스트를 수직으로 가운데에 배치합니다.

텍스트의 줄 높이를 텍스트 상위 컨테이너의 높이로 설정합니다. 이는 한 줄만 있는 상황에 적합합니다. 텍스트.

4. 테이블 사용

테이블을 사용하는 경우 td(및 가능하면 th) 요소의 align="center"를 사용하면 됩니다. valign="middle" 속성은 내부 콘텐츠의 수평 및 수직 중앙 정렬을 완벽하게 처리할 수 있으며, 테이블은 기본적으로 내부 콘텐츠를 수직 중앙에 배치합니다. CSS에서 테이블 내용의 중앙 정렬을 제어하려면 수직 중앙 정렬을 위해

vertical-align:middle을 사용할 수 있습니다. 수평 중앙 정렬의 경우 CSS에는 해당 속성이 없는 것 같지만 IE6 및 7에서는 가능합니다. IE8+ 및 Google, Firefox 및 기타 브라우저의 Text-align:center는 인라인 요소에서만 작동하며 블록 요소에서는 유효하지 않습니다.

IE6 및 7에서는 CSS text-algin을 통해 테이블 내용의 가로 정렬을 제어할 수 있으며, 이는 내용이 인라인 요소이든 블록 요소이든 유효합니다.

그러나 IE8+, Chrome, Firefox 및 기타 브라우저의 text-align:center는 블록 요소에 유효하지 않으며 테이블 자체 정렬 속성만 사용할 수 있습니다.

5. display:table-cell을 사용하여 중앙에 배치

테이블이 아닌 요소의 경우 display:table-cell을 사용하여 테이블 셀로 시뮬레이션할 수 있으므로 테이블의 편리함을 사용할 수 있습니다. 센터링 기능. 예:

그러나 이 방법은 IE8+, Google, Firefox 및 기타 브라우저에서만 사용할 수 있으며 IE6 및 IE7에서는 유효하지 않습니다.

거기에 언급된 방법은 모두 매우 기본적이며 화려한 트릭이라고 할 수 없습니다. 여기에 약간의 기술이 필요한 몇 가지 센터링 방법이 있습니다.

6. 중심 맞추기에 절대 위치 지정 사용

이 방법은 너비나 높이가 이미 알려진 요소에만 적용됩니다.

절대 위치 지정의 원리는 절대 위치 지정 요소의 왼쪽 또는 위쪽 속성을 50%로 설정하는 것입니다. 이때 요소는 중앙에 위치하지 않고 요소의 너비만큼 오른쪽 또는 왼쪽으로 오프셋됩니다. 또는 높이의 절반이므로 다시 중앙 위치로 가져오려면 음수 margin-left 또는 margin-top 값을 사용해야 합니다. 이 음수 여백 값은 요소의 너비 또는 높이의 절반을 차지합니다.

작동 효과:

한 방향으로만 센터링을 수행하려면 left 및 margin-left만 사용하여 수평 센터링을 수행하고 top 및 margin-top을 사용하여 수직 센터링을 수행할 수 있습니다.

7. 절대 위치를 가운데로 사용하는 또 다른 방법

이 방법은 너비나 높이를 이미 알고 있는 요소에만 적용 가능하며 안타깝게도 IE9+, Google, Firefox 등만 지원합니다. 최신 브라우저 기반 w3c 표준에 따라.

다음은 이 방법을 이해하기 위한 코드입니다.

작동 효과:

요소의 너비와 높이가 여기에서 정의되지 않은 경우 요소의 너비는 값에 따라 결정됩니다. 왼쪽과 오른쪽의 경우 높이는 위쪽과 아래쪽의 값에 따라 결정되므로 요소의 높이와 너비를 설정해야 합니다. 동시에 왼쪽, 오른쪽, 위쪽, 아래쪽의 값을 변경하면 특정 방향으로 요소를 오프셋할 수도 있습니다.

8. 플로팅 및 상대 위치 지정을 사용하여 수평 센터링 수행

이 방법은 플로팅 요소를 수평으로 중앙에 배치하는 방법에 대한 솔루션이기도 하며 중앙에 배치해야 하는 요소의 너비를 알 필요가 없습니다.

플로팅 센터링의 원리는 플로팅 요소를 상위 요소 너비의 50%에 상대적으로 배치하는 것입니다. 그러나 이때 요소는 아직 중앙에 위치하지 않았지만 이 경우 너비는 중앙 위치보다 절반 더 넓습니다. 내부의 하위 요소는 상대 위치 지정을 사용하여 자체 너비의 추가 절반을 가져오므로 자체 너비의 절반만 왼쪽 또는 오른쪽으로 설정하면 됩니다. 얻으므로 실제 너비가 무엇인지 알 필요가 없습니다.

중앙에 부동 및 상대 위치 지정을 사용하는 이 방법은 너비가 지속적으로 변경되는 경우에도 중앙에 배치할 요소의 너비를 알 필요가 없다는 장점이 있습니다. 요소를 중앙에 배치하십시오.

코드를 살펴보세요:

작동 효과:

9 수직 중앙 정렬을 위해 글꼴 크기를 사용하세요

부모 요소의 높이가 알려진 경우, 그 안에 있는 자식 요소는 다음과 같아야 합니다. 조정 가능 가로 및 세로 가운데 맞춤의 경우 하위 요소의 너비나 높이를 몰라도 이 방법을 사용할 수 있습니다.

이 방법은 IE6 및 IE7에만 유효합니다.

이 방법의 핵심은 상위 요소에 적합한 글꼴 크기 값을 설정하는 것입니다. 이 값은 상위 요소의 높이를 1.14로 나눈 값이며, 하위 요소는 인라인 또는 인라인 블록이어야 합니다. 요소에 수직 정렬:중간 속성을 추가해야 합니다.

왜 다른 숫자가 아닌 1.14로 나누어지는지는 아무도 모르실텐데요. 1.14라는 숫자만 기억하시면 됩니다.

방법 5에서 IE8+, Firefox, Google 등 현재 브라우저에서는 centering에 display:table-cell을 사용할 수 있다고 했는데, 여기서의 글꼴 크기 방법은 IE6, IE7에 적합합니다. 따라서 이 두 가지 방법을 결합하면 모든 브라우저에서 호환될 수 있습니다.