CSS는 블록을 수평으로 정렬합니다. CSS의 수직 중앙 정렬 방법. 페이지 하단 중앙에 DIV를 배치하세요.

요소를 수직으로 중앙에 배치 CSS를 사용하여개발자에게 다소 어려움을 주는 작업입니다. 그러나 이를 해결하는 방법에는 여러 가지가 있으며 매우 간단합니다. 안에 이번 수업 6가지 옵션 제공 수직 센터링콘텐츠.

시작해보자 일반적인 설명작업.

수직 센터링 문제

수평 센터링은 매우 간단하고 쉽습니다. 중앙에 있는 요소가 인라인인 경우 상위 요소를 기준으로 정렬 속성을 사용합니다. 요소가 블록 수준이면 너비와 자동 설치왼쪽 및 오른쪽 여백.

대부분의 사람들이 사용하는 텍스트 정렬 속성: , 수직 정렬 속성에 액세스하여 수직으로 중앙에 배치합니다. 모든 것이 매우 논리적으로 보입니다. 테이블 템플릿을 사용해 본 적이 있다면 아마도 수직 정렬에 대한 믿음을 강화하는 valign 속성을 광범위하게 사용했을 것입니다. 옳은 길문제 해결에.

그러나 valign 속성은 테이블 셀에서만 작동합니다. ㅏ 수직 정렬 속성그와 매우 유사합니다. 또한 테이블 셀과 일부 인라인 요소에도 영향을 미칩니다.

수직 정렬 속성의 값은 상위 인라인 요소를 기준으로 합니다.

• 텍스트 줄에서 정렬은 줄 높이를 기준으로 합니다.
• 테이블 셀은 특수 알고리즘으로 계산된 값(일반적으로 행 높이)을 기준으로 정렬을 사용합니다.

그러나 불행하게도 수직 정렬 속성은 블록 수준 요소(예: 내부 단락)에서는 작동하지 않습니다. div 요소). 이러한 상황은 문제에 대한 해결책이 무엇인지에 대한 생각으로 이어질 수 있습니다. 수직 정렬아니요.

그러나 블록 요소를 중앙에 배치하는 다른 방법이 있으며, 그 선택은 외부 컨테이너와 관련하여 중앙에 배치되는 요소에 따라 달라집니다.

선 높이 방법

이 방법한 줄의 텍스트를 세로로 가운데에 배치하려는 경우에 작동합니다. 행 높이를 글꼴 크기보다 크게 설정하기만 하면 됩니다.

기본 자유 공간텍스트 위와 아래에 고르게 분포됩니다. 그리고 선은 수직으로 중앙에 놓이게 됩니다. 종종 라인 높이가 요소 높이와 동일하게 만들어집니다.

HTML:

CSS:

#child ( 줄 높이: 200px; )

이 방법은 모든 브라우저에서 작동하지만 한 줄에만 사용할 수 있습니다. 예제에서 200px 값은 임의로 선택되었습니다. 모든 값을 사용할 수 있습니다. 더 큰 크기텍스트 글꼴.

Line-Height를 사용하여 이미지 중심 맞추기

내용이 사진이라면 어떨까요? 위 방법이 효과가 있을까요? 답은 CSS 코드 한 줄에 있습니다.

HTML:

CSS:

#parent( line-height: 200px; ) #parent img( 수직 정렬: middle; )

의미 줄 높이 속성이미지의 높이보다 커야 합니다.

CSS 테이블 방법

수직 정렬 속성은 표 셀에 사용되며 훌륭하게 작동한다고 위에서 언급했습니다. 요소를 테이블 셀로 표시하고 해당 요소에 수직 정렬 속성을 사용하여 내용을 수직으로 중앙에 배치할 수 있습니다.

메모: CSS 테이블 HTML 테이블과 동일하지 않습니다.

HTML:

CSS:

#parent(디스플레이: 테이블;) #child(디스플레이: 테이블-셀; 수직 정렬: 중간; )

테이블 출력을 상위 div 요소로 설정하고 중첩된 div 요소를 테이블 셀로 출력합니다. 이제 내부 컨테이너에서 수직 정렬 속성을 사용할 수 있습니다. 그 안에 있는 모든 내용은 수직으로 중앙에 배치됩니다.

위에서 설명한 방법과는 다르게, 이 경우 div 요소의 크기가 해당 콘텐츠에 따라 조정되므로 콘텐츠는 동적일 수 있습니다.

이 방법의 단점은 이전 버전의 IE에서는 작동하지 않는다는 것입니다. 중첩된 컨테이너에는 display: inline-block 속성을 사용해야 합니다.

절대 위치 지정 및 음수 여백

이 방법은 모든 브라우저에서도 작동합니다. 그러나 중앙에 배치되는 요소에는 높이가 지정되어야 합니다.

예제 코드는 수평 및 수직 센터링을 동시에 수행합니다.

HTML:

CSS:

#parent(위치: 상대;) #child( 위치: 절대; 위쪽: 50%; 왼쪽: 50%; 높이: 30%; 너비: 50%; 여백: -15% 0 0 -25%; )

먼저 요소 위치 지정 유형을 설정합니다. 다음으로 중첩된 div 요소의 top 및 left 속성을 상위 요소의 중앙에 해당하는 50%로 설정합니다. 그런데 왼쪽이 중앙으로 들어가네요 상단 모서리중첩된 요소. 따라서 이를 들어 올려(높이의 절반) 왼쪽으로(너비의 절반) 이동해야 합니다. 그러면 중심이 상위 요소의 중심과 일치하게 됩니다. 따라서 이 경우 요소의 높이를 아는 것이 필요합니다. 그런 다음 음수 상단 및 왼쪽 여백을 각각 높이와 너비의 절반으로 설정합니다.

이 방법은 모든 브라우저에서 작동하지 않습니다.

절대 위치 지정 및 스트레칭

예제 코드는 수직 및 수평 센터링을 수행합니다.

HTML:

CSS:

#parent(위치: 상대;) #child( 위치: 절대; 위쪽: 0; 아래쪽: 0; 왼쪽: 0; 오른쪽: 0; 너비: 50%; 높이: 30%; 여백: 자동; )

이 방법의 기본 개념은 위쪽, 아래쪽, 오른쪽 및 왼쪽 속성을 0으로 설정하여 중첩된 요소를 상위 요소의 4개 테두리 모두로 확장하는 것입니다.

모든 측면에서 자동 생성되도록 여백을 설정하면 4개 측면 모두에 동일한 값이 설정되고 중첩된 div 요소가 상위 요소의 중앙에 배치됩니다.

안타깝게도 이 방법은 IE7 이하에서는 작동하지 않습니다.

위와 아래의 공간이 동일함

이 방법에서는 상위 요소의 상단과 하단에 동일한 패딩이 명시적으로 설정됩니다.

HTML:

CSS:

#parent ( 패딩: 5% 0; ) #child ( 패딩: 10% 0; )

코드에서 예시 CSS위쪽 및 아래쪽 여백은 두 요소 모두에 대해 설정됩니다. 중첩된 요소의 경우 패딩을 설정하면 수직으로 중앙에 배치됩니다. 그리고 상위 요소의 패딩은 그 안에 중첩된 요소를 중앙에 배치합니다.

을 위한 역동적인 변화사용된 요소 크기 상대 단위측정. 그리고 절대 단위측정은 계산으로 이루어져야 합니다.

예를 들어, 상위 요소높이가 400px이고 중첩 요소가 100px인 경우 상단과 하단에 150px의 패딩이 필요합니다.

150 + 150 + 100 = 400

%를 사용하면 계산을 브라우저에 맡길 수 있습니다.

이 방법은 어디에서나 작동합니다. 단점계산이 필요하다는 것입니다.

메모:이 방법은 요소의 외부 패딩을 설정하여 작동합니다. 요소 내에서 여백을 사용할 수도 있습니다. 여백이나 패딩 사용 여부는 프로젝트의 세부 사항에 따라 결정되어야 합니다.

플로팅 div

이 방법은 문서에서 중첩된 요소의 위치를 ​​제어하는 ​​데 도움이 되는 부동 빈 div 요소를 사용합니다. 부동 div는 HTML 코드에서 중첩된 요소 앞에 배치됩니다.

HTML:

CSS:

#parent(높이: 250px;) #floater(float: 왼쪽; 높이: 50%; 너비: 100%; margin-bottom: -50px; ) #child( 지우기: 둘 다; 높이: 100px; )

빈 div를 왼쪽이나 오른쪽으로 오프셋하고 높이를 상위 요소의 50%로 설정합니다. 이렇게 하면 상위 요소의 위쪽 절반이 채워집니다.

이 div는 부동이므로 문서의 일반적인 흐름에서 제거되며 중첩된 요소의 텍스트 줄 바꿈을 풀어야 합니다. 이 예제에서는clear:both를 사용하지만 부동 빈 div 요소의 오프셋과 동일한 방향을 사용하는 것만으로도 충분합니다.

중첩된 div 요소의 위쪽 테두리는 빈 div 요소의 아래쪽 테두리 바로 아래에 있습니다. 중첩된 요소를 부동 빈 요소 높이의 절반만큼 위로 이동해야 합니다. 문제를 해결하려면 부동 빈 div 요소에 음수 margin-bottom 속성 값을 사용하세요.

이 방법은 모든 브라우저에서도 작동합니다. 그러나 이를 사용하려면 추가 빈 div 요소와 중첩된 요소의 높이에 대한 지식이 필요합니다.

결론

설명된 모든 방법은 사용하기 쉽습니다. 어려운 점은 그 중 어느 것도 모든 경우에 적합하지 않다는 것입니다. 프로젝트를 분석하고 적합한 프로젝트를 선택해야 합니다. 가장 좋은 방법요구 사항에 따라.

레이아웃을 다루어야 했던 많은 분들이 요소를 수직으로 정렬해야 하는 필요성을 경험하셨고, 요소를 중앙에 정렬할 때 발생하는 어려움을 알고 계실 것입니다.

예, CSS에는 수직 정렬을 위한 특별한 다중 값 수직 정렬 속성이 있습니다. 그러나 실제로는 예상대로 전혀 작동하지 않습니다. 이것을 알아 내려고 노력합시다.

다음 접근 방식을 비교해 보겠습니다. 다음을 사용하여 정렬:

• 테이블,
• 들여 쓰기,
• 선 높이
• 스트레칭,
• 마이너스 마진,
• 변환
• 의사 요소
• 플렉스박스.

설명하기 위해 다음 예를 고려하십시오.

두 개의 div 요소가 있으며 그 중 하나가 다른 요소 내에 중첩되어 있습니다. 외부 및 내부에 해당하는 클래스를 제공하겠습니다.

문제는 내부 요소를 중앙에 배치하는 것입니다. 외부 요소.

먼저, 외부 치수와 실내기 모두 다 아는. 내부 요소에는 display: inline-block 규칙을 추가하고 외부 요소에는 text-align: center 및 Vertical-align: middle 규칙을 추가해 보겠습니다.

정렬은 인라인 또는 인라인 블록 표시 모드가 있는 요소에만 적용된다는 점을 기억하세요.

블록의 크기를 설정해 보겠습니다. 배경색그들의 경계를 보기 위해.

외부(너비: 200px; 높이: 200px; 텍스트 정렬: 중앙; 수직 정렬: 중간; 배경색: #ffc; ) .inner( 디스플레이: 인라인 블록; 너비: 100px; 높이: 100px; 배경색 : #fcc )
스타일을 적용한 후 내부 블록이 가로로 정렬되지만 세로로 정렬되지 않는 것을 볼 수 있습니다.
http://jsfiddle.net/c1bgfffq/

왜 그런 일이 일어났나요?문제는 수직 정렬 속성이 정렬에 영향을 미친다는 것입니다. 내용이 아닌 요소 자체(표 셀에 적용되는 경우 제외) 따라서 이 속성을 외부 요소에 적용해도 아무 것도 생성되지 않았습니다. 게다가 이 속성을 내부 요소에 적용해도 아무 일도 일어나지 않습니다. 라인 블록(인라인 블록)은 인접한 블록을 기준으로 수직으로 정렬되며, 우리의 경우에는 하나의 인라인 블록이 있습니다.

이 문제를 해결하기 위한 몇 가지 기술이 있습니다. 아래에서는 각각에 대해 자세히 살펴보겠습니다.

테이블을 사용한 정렬

가장 먼저 떠오르는 해결책은 교체입니다. 외부 장치하나의 셀로 구성된 테이블입니다. 이 경우 셀의 내용, 즉 내부 블록에 정렬이 적용됩니다.

http://jsfiddle.net/c1bgfffq/1/

명백한 마이너스 이 결정– 의미론적 관점에서 정렬을 위해 테이블을 사용하는 것은 올바르지 않습니다. 두 번째 단점은 테이블을 생성하려면 외부 블록 주위에 다른 요소를 추가해야 한다는 것입니다.

첫 번째 마이너스는 table 및 td 태그를 div로 바꾸고 CSS에서 테이블 표시 모드를 설정하여 부분적으로 제거할 수 있습니다.

.outer-wrapper ( 디스플레이: 테이블; ) .outer ( 디스플레이: 테이블 셀; )
그러나 외부 블록은 여전히 ​​모든 후속 결과가 포함된 테이블로 유지됩니다.

들여쓰기를 사용한 정렬

내부 및 외부 블록의 높이를 알고 있는 경우 다음 공식을 사용하여 내부 블록의 수직 들여쓰기를 사용하여 정렬을 설정할 수 있습니다: (H 외부 – H 내부) / 2.

외부( 높이: 200px; ) .inner( 높이: 100px; 여백: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

솔루션의 단점은 다음에만 적용 가능하다는 것입니다. 제한된 수두 블록의 높이가 알려진 경우.

줄 높이를 사용한 정렬

내부 블록이 텍스트 한 줄만 차지해야 한다는 것을 알고 있다면 line-height 속성을 사용하여 외부 블록의 높이와 동일하게 설정할 수 있습니다. 내부 블록의 내용은 두 번째 줄로 넘어가서는 안 되므로 공백: nowrap 및 오버플로: 숨겨진 규칙도 추가하는 것이 좋습니다.

외부( 높이: 200px; 줄 높이: 200px; ) .inner( 공백: nowrap; 오버플로: 숨겨진; )
http://jsfiddle.net/c1bgfffq/12/

이 기술은 레벨링에도 사용할 수 있습니다. 여러 줄 문자, 내부 블록의 줄 높이 값을 재정의하고 display: inline-block 및 Vertical-align: 중간 규칙도 추가하는 경우.

외부( 높이: 200px; 줄 높이: 200px; ) .inner( 줄 높이: 일반; 디스플레이: 인라인 블록; 수직 정렬: 중간; )
http://jsfiddle.net/c1bgfffq/15/

이 방법의 단점은 외부 블록의 높이를 알아야 한다는 것이다.

"늘이기"를 사용한 정렬

이 방법은 외부 블록의 높이를 알 수 없으나 내부 블록의 높이를 알 때 사용할 수 있습니다.

이렇게 하려면 다음이 필요합니다.

1. 외부 장치로 설정 상대 위치 지정, 그리고 내부 – 절대;
2. top: 0 및 lower: 0 규칙을 내부 블록에 추가하면 결과적으로 외부 블록의 전체 높이까지 늘어납니다.
3. 내부 블록의 수직 패딩을 자동으로 설정합니다.

.outer ( 위치: 상대; ) .inner ( 높이: 100px; 위치: 절대; 위쪽: 0; 아래쪽: 0; 여백: 자동 0; )
http://jsfiddle.net/c1bgfffq/4/

이 기술의 기본 아이디어는 늘어나서 절대 위치에 있는 블록의 높이를 설정하면 브라우저가 수직 패딩을 계산하도록 한다는 것입니다. 동등한 비율, 해당 값이 auto 로 설정된 경우.

음수 여백-상단 정렬

이 방법은 널리 알려졌고 매우 자주 사용됩니다. 앞의 것과 마찬가지로 바깥쪽 블록의 높이를 알 수 없으나 안쪽 블록의 높이를 알 때 사용한다.

외부 블록은 상대 위치로, 내부 블록은 절대 위치로 설정해야 합니다. 그런 다음 내부 블록을 외부 블록 상단 높이의 절반인 50%만큼 아래로 이동하고 자체 높이의 절반만큼 올려야 합니다. margin-top: -H 내부 / 2.

외부( 위치: 상대; ) .inner( 높이: 100px; 위치: 절대; 상단: 50%; 여백-상단: -50px; )
http://jsfiddle.net/c1bgfffq/13/

이 방법의 단점은 실내기의 높이를 알아야 한다는 것이다.

변환과 정렬

이 방법은 앞선 방법과 유사하지만, 실내기의 높이를 알 수 없는 경우에 사용할 수 있습니다. 이 경우 음수 픽셀 패딩을 설정하는 대신 변환 속성을 사용하고 TranslateY 함수와 -50% 값을 사용하여 내부 블록을 위로 이동할 수 있습니다.

외부( 위치: 상대; ) .inner( 위치: 절대; 상단: 50%; 변환: 번역Y(-50%); )
http://jsfiddle.net/c1bgfffq/9/

왜 이전 방법값을 백분율로 설정할 수 없나요? 백분율 여백 값은 상위 요소를 기준으로 계산되므로 50% 값은 외부 상자 높이의 절반이 되며 내부 상자를 자체 높이의 절반으로 올려야 합니다. 변환 속성은 이에 적합합니다.

이 방법의 단점은 실내기가 절대 위치 지정 기능을 갖고 있는 경우에는 사용할 수 없다는 점입니다.

Flexbox와의 정렬

최대 현대적인 방법수직 정렬은 유연한 상자 레이아웃(일반적으로 Flexbox로 알려짐)을 사용하는 것입니다. 이 모듈페이지의 요소 위치를 유연하게 제어하여 거의 모든 위치에 배치할 수 있습니다. Flexbox의 중앙 정렬은 매우 간단한 작업입니다.

외부 블록은 display: flex 로 설정하고 내부 블록은 margin: auto 로 설정해야 합니다. 그리고 그게 전부입니다! 아름답지 않나요?

외부( 디스플레이: 플렉스; 너비: 200px; 높이: 200px; ) .inner( 너비: 100px; 여백: 자동; )
http://jsfiddle.net/c1bgfffq/14/

이 방법의 단점은 Flexbox가 최신 브라우저에서만 지원된다는 것입니다.

어떤 방법을 선택해야 합니까?

문제 설명부터 시작해야 합니다.

• 텍스트를 수직으로 정렬하려면 수직 들여쓰기나 line-height 속성을 사용하는 것이 좋습니다.
• 높이가 알려진 절대 위치 요소(예: 아이콘)의 경우 음수 margin-top 속성을 사용하는 방법이 이상적입니다.
• 이상 복잡한 사례블록의 높이를 알 수 없는 경우 의사 요소나 변환 속성을 사용해야 합니다.
• 글쎄, 운이 좋아서 이전 버전의 IE 브라우저를 지원할 필요가 없다면 물론 Flexbox를 사용하는 것이 좋습니다.

태그: 태그 추가

독자 여러분, 오늘은 블록의 수직 정렬 문제를 다루겠습니다. div.

아마도 당신은 이미 훌륭한 CSS 속성의 존재에 대해 알고 있을 것입니다. 수직 정렬.그리고 하나님께서는 수직 정렬을 위해 정확하게 이 속성을 사용하라고 명령하셨습니다.

문제의 공식화:수직을 기준으로 가변 높이 블록의 내용을 중앙에 배치해야 합니다.

이제 문제 해결을 시작해 보겠습니다.

따라서 블록이 있고 높이가 변경될 수 있습니다.

가장 먼저 떠오르는 것은 다음과 같은 페인트를 수행하는 것입니다.

이 문구를 믿을 만한 모든 이유가 있습니다. 콘텐츠 차단 div 컨테이너의 중앙 높이에 정렬됩니다.

그러나 그것은 거기에 없었습니다! 이런 식으로 예상되는 중심 정렬을 달성할 수 없습니다. 그리고 왜? 모든 것이 올바르게 표시된 것 같습니다. 이것이 문제인 것으로 밝혀졌습니다: 재산 수직 정렬표 셀의 내용을 정렬하거나 인라인 요소를 서로 기준으로 정렬하는 데에만 사용할 수 있습니다.

표 셀 내부의 정렬과 관련하여 모든 것이 명확하다고 생각합니다. 하지만 인라인 요소를 사용하는 또 다른 경우를 설명하겠습니다.

인라인 요소의 수직 정렬

줄 태그로 구분된 텍스트 줄이 있다고 가정합니다. 부분으로:

너 환영합니다 조각텍스트!

인라인 태그는 모양에 따라 내용이 전송되지 않는 컨테이너입니다. 새 줄.

블록 태그의 동작으로 인해 컨테이너의 내용이 새 줄로 줄바꿈됩니다.

블록 태그입니다. 텍스트 조각을 블록으로 묶으면

, 그러면 각각은 새로운 줄에 있게 될 것입니다. 태그 사용 , 이는 달리

는 소문자이며 컨테이너는 새 줄로 이동되지 않습니다. 모든 컨테이너는 같은 줄에 남게 됩니다.

컨테이너 텍스트의 일부를 지정할 때 사용하기 편리합니다. 특수 서식(색상, 다른 글꼴 등으로 강조 표시)

컨테이너용 다음 CSS 속성을 적용합니다.

#perviy( 수직 정렬:sub; ) #vtoroy( 수직 정렬:3px; ) #tretiy( 수직 정렬:-3px; )

결과 텍스트 줄은 다음과 같습니다.

이는 인라인 요소의 수직 정렬과 CSS 속성에 지나지 않습니다. 수직 정렬이 작업에 완벽하게 대처합니다.

약간 산만해졌으므로 이제 주요 작업으로 돌아갑니다.

div 컨테이너의 수직 정렬

무슨 일이 있어도 div 컨테이너 내 정렬을 위해 속성을 사용합니다. 수직 정렬. 내가 이미 말했듯이, 이 속성인라인 요소를 정렬하는 경우에 사용할 수 있습니다(이 경우는 위에서 자세히 설명했으며 div 컨테이너의 정렬에는 적합하지 않습니다). 남은 것은 그 사실을 활용하는 것뿐이다. 수직 정렬테이블 셀에서 작동합니다.

이것을 어떻게 사용할 수 있나요? 우리는 테이블이 없고 div 컨테이너로 작업합니다.

하, 정말 간단한 것 같네요.

CSS 속성 표시하다 div 블록을 테이블 셀로 바꿀 수 있습니다. 이 작업은 쉽고 자연스럽게 수행할 수 있습니다.

클래스 div가 있다고 가정해 보겠습니다. 텍스트 정렬:

이 블록에 대해 다음 CSS 속성을 지정합니다.

Textalign( 표시: 테이블 셀; )

이 CSS 명령어는 div를 어떤 식으로든 시각적으로 변경하지 않고도 기적적으로 테이블 셀로 변환합니다. 그리고 테이블 셀의 경우 속성을 적용할 수 있습니다. 수직 정렬 V 충분히원하는 수직 정렬이 작동합니다.

그러나 모든 것이 그렇게 간단하게 끝날 수는 없습니다. 우리는 훌륭한 IE 브라우저를 가지고 있습니다. 그는 부동산을 다루는 방법을 모른다 디스플레이: 테이블 셀(웹사이트 htmlbook.ru에서 다양한 브라우저에서 이 CSS 속성의 기능을 설명하는 표를 읽어 보시기 바랍니다.) 그러므로 우리는 다양한 트릭을 사용해야 할 것입니다.

모든 브라우저의 div 컨테이너에서 정렬을 수행하는 방법에는 여러 가지가 있습니다.

• 추가 보조 div 컨테이너를 사용하는 방법
• 표현식을 사용하는 방법. 이는 블록 높이의 까다로운 계산과 연결됩니다. JavaScript에 대한 지식이 없으면 이 작업을 수행할 수 없습니다.
• line-height 속성을 사용합니다. 이 방법은 높이가 알려진 블록의 수직 정렬에만 적합합니다. 일반적인 경우해당되지 않습니다.
• IE 브라우저의 경우 절대 및 상대 콘텐츠 오프셋을 사용합니다. 이 방법이 가장 이해하기 쉽고 간단한 것 같습니다. 또한 가변 높이 div 컨테이너에 대해 구현 가능합니다. 우리는 그것에 대해 더 자세히 설명하겠습니다.

아시다시피, 우리는 속성에 대한 오해와 관련된 IE의 수직 정렬 문제를 해결해야 합니다. 디스플레이: 테이블 셀(IE6도, IE7도, IE8이 속성에 익숙하지 않습니다). 따라서 조건부 주석특히 IE 브라우저 제품군에 대해 다양한 CSS 속성을 지정합니다.

조건부 주석

건축 유형:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

조건부 주석이라고 합니다(조심하세요. 조건부 주석의 유형은 공백까지 제공된 예와 완전히 일치해야 합니다).

이러한 조건부 주석에 포함된 지침은 브라우저가 해석하는 경우에만 실행됩니다. 이 코드, IE 제품군에 속합니다.

따라서 조건부 주석을 사용하면 IE를 제외한 모든 브라우저에서 코드 조각을 숨길 수 있습니다.

문제의 해결

이 모든 파슬리로 인해 HTML 코드에 두 개의 추가 컨테이너를 제공해야 합니다. 텍스트 블록은 다음과 같습니다.

div 컨테이너 클래스의 경우 텍스트 정렬모든 일반 브라우저(물론 IE 제외)에 대해 콘텐츠를 수직으로 정렬하는 CSS 속성이 설정됩니다.

디스플레이: 테이블 셀; 수직 정렬: 중간;

그리고 블록의 너비와 높이를 설정하는 두 가지 추가 속성:

너비: 500px; 높이: 500px;

이는 모든 브라우저에서 컨테이너의 내용을 수직을 기준으로 중앙에 정렬하기에 충분합니다. IE를 제외하고.

이제 정렬과 관련된 속성을 추가하기 시작합니다. IE 제품군 브라우저의 경우(그들을 위해 우리는 추가 블록 div그리고 기간):

태그를 참조하면 div클래스 블록 내부 텍스트 정렬. 이렇게 하려면 먼저 클래스 이름을 표시한 다음, 액세스하려는 태그를 공백으로 구분하여 표시해야 합니다.

Textalign div( 위치: 절대; 위쪽: 50%; )

이 디자인의 의미는 다음과 같습니다. div 태그클래스가 있는 블록 내부 텍스트 정렬나열된 속성을 적용합니다.

따라서 블록에 지정된 스타일은 텍스트 정렬수정되었습니다:

Textalign( 표시: 테이블 셀; 수직 정렬: 중간; 너비:500px; 높이: 500px; 위치: 상대; )

이제 텍스트 블록의 왼쪽 상단 지점이 50% 아래로 이동되었습니다.

무슨 일이 일어나고 있는지 설명하기 위해 그림을 그렸습니다.

사진에서 볼 수 있듯이 우리는 어느 정도 진전을 이루었습니다. 하지만 그게 전부는 아닙니다! 노란색 블록의 왼쪽 상단 지점은 실제로 상위(보라색) 블록을 기준으로 50% 아래로 이동했습니다. 하지만 보라색 블록 높이의 50%에 있어야 합니다. 노란색 블록의 중심, 왼쪽 상단 지점이 아닙니다.

이제 태그가 작동하게 됩니다. 기간그리고 상대적인 위치는 다음과 같습니다:

텍스트 정렬 범위( 위치: 상대; 위쪽: -50%; )

따라서 우리는 노란색 블록을 높이의 50%만큼 위로 이동시켰습니다. 초기 위치. 아시다시피 노란색 블록의 높이는 중앙에 있는 콘텐츠의 높이와 같습니다. 그리고 스팬 컨테이너의 마지막 작업은 콘텐츠를 보라색 블록 중앙에 배치했습니다. 만세!

좀 속여보자

우선 모든 일반 브라우저에서 파슬리를 숨기고 IE용으로 열어야 합니다. 물론 조건부 주석을 사용하여 이 작업을 수행할 수 있습니다.

작은 문제가 있습니다.중앙에 있는 콘텐츠가 너무 높으면 불쾌한 결과가 발생합니다. 수직 스크롤에 추가 높이가 발생합니다.

문제 해결 방법:속성을 추가해야 합니다 오버플로: 숨김차단하다 텍스트 정렬.

부동산을 자세히 알아보세요. 과다에서 가능합니다.

블록에 대한 최종 CSS 지침 텍스트 정렬형식은 다음과 같습니다.

Textalign( 표시: 테이블 셀; 수직 정렬: 중간; 너비:500px; 높이: 500px; 위치: 상대; 오버플로: 숨김; 테두리: 1px 단색 검정색; )

죄송합니다. 한 가지 언급하는 것을 잊어버렸습니다. 중요한 점. 당신이 시도한다면 클래스 블록의 높이를 설정 텍스트 정렬 V 백분율 , 그렇다면 당신은 아무것도 작동하지 않습니다.

가변 높이 블록의 중심 맞추기

클래스 블록의 높이를 설정해야 하는 경우가 매우 많습니다. 텍스트 정렬픽셀 단위가 아니라 상위 블록 높이의 백분율로 표시하고 div 컨테이너의 내용을 가운데에 정렬합니다.

문제는 테이블 셀에서는 이 작업을 수행하는 것이 불가능하다는 것입니다(그러나 클래스 블록은 텍스트 정렬속성 덕분에 정확히 테이블 셀로 변합니다. 표시:테이블 셀).

이 경우 CSS 속성이 지정된 외부 블록을 사용해야 합니다. 표시:테이블이미 높이의 백분율 값을 설정했습니다. 그런 다음 CSS 지시문을 사용하여 그 안에 중첩된 블록을 만듭니다. 표시:테이블 셀, 부모 블록의 높이를 행복하게 상속합니다.

이 예에서는 가변 높이 블록을 구현하기 위해 CSS를 약간 편집합니다.

수업에 텍스트 정렬우리는 부동산 가치를 바꿀 것입니다 표시하다와 함께 테이블 셀~에 테이블정렬 지시어를 제거하십시오. 수직 정렬: 중간. 이제 높이 값을 500픽셀에서 예를 들어 100%로 안전하게 변경할 수 있습니다.

따라서 클래스 블록의 CSS 속성은 텍스트 정렬다음과 같이 보일 것입니다 :

Textalign( 표시: 테이블; 너비:500px; 높이: 100%; 위치: 상대; 오버플로: 숨김; 테두리: 1px 단색 검정; )

남은 것은 콘텐츠 센터링을 구현하는 것뿐입니다. 이렇게 하려면 클래스 블록에 중첩된 div 컨테이너를 사용하세요. 텍스트 정렬(이것은 그림과 동일한 노란색 블록입니다.) CSS 속성을 설정해야 합니다. 표시:테이블 셀, 그러면 상위 블록에서 100% 높이를 상속받습니다. 텍스트 정렬(보라색 블록). 그리고 중앙에 중첩된 div 컨테이너의 콘텐츠를 속성과 정렬하는 것을 막을 수 있는 것은 없습니다. 수직 정렬: 중간.

우리는 또 하나를 얻습니다 추가 목록 CSS 속성 div 블록컨테이너에 중첩됨 텍스트 정렬.

Textalign div( 표시: 테이블 셀; 수직 정렬: 중간; )

그게 전부입니다. 원하는 경우 콘텐츠를 중앙에 두고 높이를 가변적으로 설정할 수 있습니다.

가변 높이 블록의 수직 정렬에 대한 자세한 내용은 을(를) 참고하십시오.

오늘의 기사는 몇 가지 CSS 트릭을 사용하여 div를 수평 및 수직으로 중앙에 배치하는 방법을 보여주는 것을 목표로 합니다. 또한 전체 페이지 또는 개별 div 요소를 중앙에 배치하는 방법도 알려드리겠습니다.

DIV 요소를 페이지 중앙에 쉽게 배치

이 방법은 모든 브라우저에서 완벽하게 작동합니다.

CSS

Center-div( 여백: 0 자동; 너비: 100px; )

예

여백 속성의 auto 값은 왼쪽 및 오른쪽 여백을 페이지에서 사용 가능한 전체 공간으로 설정합니다. 여기서 기억해야 할 중요한 점은 중앙에 위치한 div 요소에는 너비 값이 설정되어 있어야 한다는 것입니다.

구식 방식으로 DIV 요소 내부에 DIV를 중앙에 배치

이 중앙 정렬 div 방법은 모든 브라우저에서 작동합니다.

CSS

외부 div(패딩: 30px; ) .inner-div(여백: 0 자동; 너비: 100px; )

HTML

예

외부 div는 어디에나 배치할 수 있지만 내부 div는 지정된 너비( 너비).

인라인 블록을 사용하여 DIV 요소 내부에 DIV 중심 맞추기

이 방법에서는 센터링 div div 내부에서는 내부 요소의 너비를 지정할 필요가 없습니다. 그것은 모두 작동합니다 최신 브라우저, IE8을 포함합니다.

CSS

외부 div( 패딩: 30px; 텍스트 정렬: 중앙; ) .inner-div( 디스플레이: 인라인 블록; 패딩: 50px; )

HTML

예

text-align 속성은 인라인 요소에서만 작동합니다. inline-block 값을 사용하면 내부 div를 인라인 요소 및 블록( 인라인 블록). 외부 div 요소의 text-align 속성을 사용하면 내부 div를 중앙에 배치할 수 있습니다.

DIV 요소 내부의 DIV를 가로 및 세로 중앙에 배치

여기서 margin: auto는 페이지 중앙에 div를 중앙에 배치하는 데 사용됩니다. 이 예제는 모든 최신 브라우저에서 작동합니다.

CSS

외부 div(패딩: 30px; ) .inner-div(여백: 자동; 너비: 100px; 높이: 100px; )

HTML

예

내부 div 요소에는 지정된 너비( 너비) 및 높이( 키). 외부 div 요소의 높이가 고정되어 있으면 이 방법이 작동하지 않습니다.

페이지 하단 중앙에 DIV를 배치하세요.

여기에 div 위치수직 중앙에서는 외부 요소에 대해 margin: auto 및 절대 위치 지정을 사용합니다. 이 방법은 모든 최신 브라우저에서 작동합니다.

CSS

외부 div( 위치: 절대; 하단: 30px; 너비: 100%; ) .inner-div( 여백: 0 자동; 너비: 100px; 높이: 100px; 배경색: #ccc; )

HTML

예

내부 div에는 너비가 설정되어 있어야 합니다. 페이지 하단의 공간은 외부 div의 하단 속성을 사용하여 조정됩니다. 하단 속성을 상단 속성으로 대체하여 페이지 상단에 div를 중앙에 배치할 수도 있습니다.

페이지의 수직 및 수평 중앙에 DIV 배치

여기에서는 div를 중앙에 배치하기 위해 다시 margin: auto 및 외부 div의 절대 위치 지정을 사용합니다. 이 방법은 모든 최신 브라우저에서 작동합니다.

CSS

Center-div( 위치: 절대; 여백: 자동; 위쪽: 0; 오른쪽: 0; 아래쪽: 0; 왼쪽: 0; 너비: 100px; 높이: 100px; )

예

div 요소에는 너비가 설정되어 있어야 합니다( 너비) 및 높이( 키).

페이지에서 DIV 요소를 적응적으로 가운데에 배치

여기에 div 정렬가운데에 CSS를 사용하여창 크기의 변화에 ​​반응하도록 div 요소의 너비를 반응형으로 만듭니다. 이 방법은 모든 브라우저에서 작동합니다.

CSS

Center-div( 여백: 0 자동; 최대 너비: 700px; )

예

중앙에 위치한 div 요소에는 max-width 속성이 설정되어 있어야 합니다.

내부 블록 속성을 사용하여 요소 내부에 DIV 중심 맞추기

여기의 내부 div 요소는 반응형입니다. div 내부에 div를 중앙에 배치하는 이 방법은 모든 브라우저에서 작동합니다.

CSS

외부 div(패딩: 30px; ) .inner-div(여백: 0 자동; 최대 너비: 700px; )

HTML

예

내부 div에는 max-width 속성이 설정되어 있어야 합니다.

두 개의 반응형 div를 서로 옆에 중앙에 배치

여기에는 두 개의 반응형 div 요소가 나란히 있습니다. 화면 중앙에 div를 배치하는 이 방법은 모든 최신 브라우저에서 작동합니다.

CSS

컨테이너( 텍스트 정렬: 중앙; ) .left-div( 디스플레이: 인라인 블록; 최대 너비: 300px; 수직 정렬: 상단; ) .right-div( 디스플레이: 인라인 블록; 최대 너비: 150px; ) 화면 및 (최대 너비: 600px) ( .left-div, .right-div ( lef max-width: 100%; ) )

HTML

예

여기에는 중앙 컨테이너 내부에 인라인 블록 속성이 적용된 여러 요소가 있습니다. 이 예에서는 또한 CSS 미디어 쿼리; 즉, 화면 크기가 600픽셀 미만인 경우 왼쪽 및 오른쪽 div 모두의 max-width 속성이 100%로 설정됩니다.

Flexbox를 사용하여 DIV 요소를 중앙에 배치

여기서는 CSS div를 중앙에 배치합니다. Flexbox 사용. 디자인 개발 프로세스를 촉진하기 위한 것입니다. 사용자 인터페이스. 이 모듈은 Chrome 38+, IE11, 마이크로소프트 엣지, Firefox 38+ , Safari 9+ , Opera 30+ , iOS 사파리 9+ 그리고 또한 안드로이드 브라우저 40+ .

CSS

컨테이너( 디스플레이: flex; align-items: center; justify-content: center; height: 100vh; ) .item( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )

저자로부터:우리 블로그 페이지에 다시 오신 것을 환영합니다. 오늘 기사에서 제가 이야기하고 싶은 것은 다양한 기술블록과 그 내용 모두에 적용할 수 있는 정렬입니다. 특히 CSS에서 블록을 정렬하는 방법과 텍스트 정렬 방법을 알아보세요.

블록을 중앙에 정렬

CSS에서는 블록을 중앙에 배치하는 것이 쉽습니다. 이것은 많은 사람들에게 가장 잘 알려진 기술이지만, 우선 지금 당장 그것에 대해 이야기하고 싶습니다. 이는 상위 요소를 기준으로 수평 중앙 정렬을 의미합니다. 어떻게 이루어 집니까? 컨테이너가 있고 그 안에 실험 대상이 있다고 가정해 보겠습니다.

< div id = "wrapper" > < div id = "header" > < / div > < / div >

이것이 사이트 헤더라고 가정해 보겠습니다. 이는 창의 전체 너비에 걸쳐 늘어나지 않으므로 중앙에 배치해야 합니다. 우리는 다음과 같이 씁니다:

#머리글( 너비 / 최대 - 너비 : 800px ; 여백: 0 자동;

우리는 정확한 또는 최대 너비을 누른 다음 주요 속성인 margin: 0 auto를 적어 둡니다. 헤더의 외부 여백을 설정하고, 첫 번째 값은 위쪽 및 아래쪽 여백을 결정하고, 두 번째 값은 오른쪽 및 왼쪽 여백을 결정합니다. auto 값은 요소가 정확히 상위 요소의 중앙에 위치하도록 브라우저가 양쪽의 패딩을 자동으로 계산하도록 지시합니다. 편안한!

텍스트 정렬

이것도 매우 간단한 기술이다. 모든 인라인 요소를 정렬하려면 text-align 속성과 해당 값(왼쪽, 오른쪽, 가운데)을 사용할 수 있습니다. 후자는 우리에게 필요한 텍스트를 중앙에 배치합니다. 같은 방식으로 그림을 정렬할 수도 있습니다. 기본적으로 정렬되어 있기 때문입니다. 인라인 요소.

텍스트를 세로로 정렬

그러나 이것은 더 복잡합니다. 기본적으로 블록 컨테이너에서 텍스트를 수직으로 쉽게 중앙에 배치하는 간단하고 잘 알려진 속성은 없습니다. 그러나 레이아웃 디자이너가 수년에 걸쳐 생각해낸 몇 가지 기술이 있습니다.

패딩을 사용하여 블록 높이를 설정합니다. 방법은 명시적인 높이를 설정하지 않는 것입니다. 높이 사용, 그러나 상단과 하단의 패딩을 사용하여 인위적으로 생성해야 하며 이는 동일해야 합니다. 블록을 생성하고 여기에 다음 속성을 작성해 보겠습니다.

div( 배경: #ccc; 패딩: 30px 0; )

div( 배경 : #ccc; 패딩: 30px 0;

배경은 가장자리도 시각적으로 보기 위한 것입니다. 심. 이제 블록의 높이는 이 두 개의 들여쓰기와 줄 자체로 구성되며 모두 다음과 같습니다.

정의 블록 선 높이. 더 많은 것 같아요 옳은 길, 한 줄의 텍스트를 정렬해야 하는 경우. 이를 통해 height 속성을 사용하여 일반에 따라 높이를 작성할 수 있습니다. 그런 다음 블록 전체의 높이와 동일한 선 높이도 설정해야 합니다.

div( 높이: 60px; 줄 높이: 60px; )

div( 높이: 60px; 줄 높이: 60px;

결과는 위의 그림과 비슷할 것입니다. 패딩을 추가하더라도 모든 것이 작동합니다. 단, 한 줄만 가능합니다. 요소에 더 많은 텍스트가 필요한 경우 이 방법작동하지 않습니다.

블록을 테이블 셀로 변환합니다. 이 방법의 핵심은 테이블 셀에 요소를 세로로 가운데에 배치하는 수직 정렬: 중간 속성이 있다는 것입니다. 따라서 이 경우 블록을 다음과 같이 설정해야 합니다.

div(디스플레이: 테이블 셀; 수직 정렬: 중간; )

div( 디스플레이: 테이블 - 셀; 수직 - 정렬: 중간;

이 방법은 원하는 만큼 많은 텍스트를 중앙에 정렬할 수 있다는 점에서 좋습니다. 그러나 div가 중첩된 블록에 display: table을 작성하는 것이 더 좋습니다. 그렇지 않으면 작동하지 않을 수 있습니다.

자, 여기 오늘의 마지막 기술이 있습니다. 이것은 블록 자체의 수직 정렬입니다. 다시 말하지만, 이를 위해 특별히 고안된 속성은 없지만 알아야 할 몇 가지 요령이 있습니다.

들여쓰기를 백분율로 설정합니다. 상위 요소의 높이를 알고 그 안에 다른 블록 요소를 배치하는 경우 백분율 패딩을 사용하여 중앙에 배치할 수 있습니다. 예를 들어 부모의 높이는 600픽셀입니다. 그 안에 높이 300픽셀의 블록을 배치합니다. 중앙에 위치시키려면 상단과 하단을 얼마나 뒤로 빼야 합니까? 각각 150픽셀, 이는 부모 높이의 25%입니다.

이 방법은 치수가 계산을 허용하는 경우에만 정렬을 허용합니다. 그리고 부모의 키가 887픽셀이면 아무것도 정확하게 기록할 수 없으며 이는 이미 분명합니다.

테이블 셀에 요소를 삽입합니다. 다시 말하지만, 상위 요소를 테이블 셀로 변환하면 여기에 삽입된 블록이 자동으로 수직 중앙에 배치됩니다. 이렇게 하려면 부모는 수직 정렬: 중간을 설정하면 됩니다.

그리고 이것에 더해 margin: 0 auto도 쓴다면, 요소는 수평 중앙에 놓일 것입니다!