왼쪽 블록

오른쪽 블록

우리 사이트에 대한 링크

이것은 마법의 버튼입니다. 그것을 클릭하면 숨겨진 블록을 숨기거나 표시합니다.

. HTML5의 도래와 기사나 헤더 형태의 심각한 경쟁자의 출현에도 불구하고, 그것은 계속해서 모든 곳의 마크업에 삽입되고 있습니다. 따라서 중앙에서 div 블록의 서식 지정 및 정렬 문제를 처리하는 것이 좋습니다.

DIV 란 무엇입니까

요소의 이름은 나눗셈을 의미하는 영어 단어 division에서 유래합니다. 마크업을 작성할 때 요소를 블록으로 나누는 데 사용됩니다. DIV는 웹 페이지의 콘텐츠 그룹을 묶습니다. 예를 들어 이미지, 텍스트가 있는 단락. 태그는 어떤 식으로든 콘텐츠 표시에 영향을 미치지 않으며 의미론적 로드를 전달하지 않습니다.

DIV는 모든 전역 속성을 지원합니다. 그러나 웹 디자인의 경우 클래스와 ID의 두 가지만 있으면 됩니다. 이국적인 경우에만 나머지 모든 것을 기억할 수 있으며 이는 사실이 아닙니다. div를 가운데 정렬하거나 왼쪽 정렬하는 데 사용되었던 align 속성은 더 이상 사용되지 않습니다.

DIV를 사용해야 하는 경우

사이트가 냉장고이고 DIV가 콘텐츠를 분류하는 데 필요한 플라스틱 용기라고 상상해 보십시오. 당신은 리버부어스트와 같은 용기에 과일을 넣지 않을 것입니다. 당신이 별도로 두는 제품의 각 종류. 웹 콘텐츠도 비슷한 방식으로 생성됩니다.

아무 사이트나 열고 의미 블록으로 나눕니다. 상단에 머리글, 하단에 바닥글, 중앙에 본문. 측면에는 일반적으로 판촉 콘텐츠 또는 태그 클라우드가 있는 작은 열이 있습니다.

이제 각 섹션을 더 자세히 분해하십시오. 헤더로 시작하십시오. 사이트 헤더에는 별도의 로고, 탐색, 1단계 제목, 때로는 슬로건이 있습니다. 각 의미 블록에 고유한 컨테이너를 할당합니다. 이렇게 하면 흐름의 요소가 분리될 뿐만 아니라 서식을 쉽게 지정할 수 있습니다. 클래스나 ID를 지정하여 DIV 태그의 중심에 개체를 배치하는 것이 훨씬 쉽습니다.

여백이 있는 가운데 정렬 DIV

웹 요소를 렌더링할 때 브라우저는 패딩, 여백 및 테두리의 세 가지 속성을 고려합니다. 패딩은 콘텐츠와 테두리 사이의 공간입니다. 여백 - 한 개체를 다른 개체와 구분하는 필드입니다. 테두리는 블록을 따라 있는 선입니다. 모두에서 한 번에 할당하거나 한쪽에서만 할당할 수 있습니다.

div( border: 1px solid #333; border-left: 없음; )

이러한 속성은 개체 사이에 여유 공간을 추가하고 원하는 대로 정렬하고 배치하는 데 도움이 됩니다. 예를 들어, 그림이 있는 블록을 왼쪽 가장자리에서 가운데로 20% 오프셋해야 하는 경우 값이 20%인 요소에 왼쪽 여백을 할당합니다.

img로 차단(왼쪽 여백: 20%; )

요소는 너비 값과 음수 패딩을 사용하여 형식을 지정할 수도 있습니다. 예를 들어 200x200px 크기의 블록이 있습니다. 먼저 절대 위치를 지정하고 중앙으로 50% 이동합니다.

Div( 위치: 절대; 왼쪽: 50%; )

이제 DIV가 완벽하게 중앙에 있는지 확인하려면 너비의 50%, 즉 -100픽셀과 같은 음수 왼쪽 패딩을 지정합니다.

여백-왼쪽: -100px

CSS에서는 이것을 "공기 제거"라고 합니다. 그러나 여러 수준의 중첩이 있는 요소에 대해 수행하기가 상당히 어려운 일정한 계산을 수행해야 한다는 점에서 상당한 단점이 있습니다. 패딩과 테두리 너비가 설정된 경우 브라우저는 기본적으로 컨테이너의 크기를 테두리 두께, 오른쪽, 왼쪽의 패딩, 콘텐츠 자체의 합으로 계산하므로 놀라울 수도 있습니다.

따라서 DIV를 중앙에 배치해야 하는 경우 border-box 값과 함께 box-sizing 속성을 사용하십시오. 브라우저가 DIV 요소의 전체 너비에 패딩 및 테두리 값을 추가하는 것을 방지합니다. 요소를 높이거나 낮추려면 음수 값도 사용하십시오. 그러나 이 경우 컨테이너의 위쪽 또는 아래쪽 필드에 할당할 수 있습니다.

자동 여백을 사용하여 div 블록을 가운데에 맞추는 방법

이것은 큰 블록을 중앙에 배치하는 쉬운 방법입니다. 컨테이너의 너비와 margin 속성을 auto로 설정하기만 하면 됩니다. 브라우저는 모든 작업을 자체적으로 수행하면서 왼쪽과 오른쪽에 동일한 여백을 두고 가운데에 블록을 배치합니다. 결과적으로 수학적 계산에서 혼동될 위험이 없으며 시간을 크게 절약할 수 있습니다.

반응형 앱을 개발할 때 자동 여백 방법을 사용합니다. 핵심은 컨테이너에 너비 값을 ems 또는 백분율로 지정하는 것입니다. 위 예제의 코드는 다음을 포함한 모든 장치의 DIV를 중앙에 배치합니다. 휴대전화, 화면의 90%를 차지합니다.

속성 표시를 통한 정렬: 인라인 블록

기본적으로 DIV 요소는 블록 요소로 간주되며 블록의 표시 값을 갖습니다. 이 방법의 경우 이 속성을 재정의해야 합니다. 상위 컨테이너가 있는 DIV에만 적합:

외부 div 클래스가 있는 요소에는 값이 center인 text-align 속성이 할당되며, 이는 텍스트를 내부의 중앙에 배치합니다. 그러나 현재로서는 브라우저가 중첩된 DIV를 블록 개체로 봅니다. text-align 속성이 작동하려면 inner-div를 인라인으로 처리해야 합니다. 따라서 에서 CSS 테이블 inner-div 선택기의 경우 다음 코드를 작성합니다.

내부 div( 표시: 인라인 블록; )

표시 속성을 블록에서 인라인 블록으로 변경합니다.

변환/번역 방법

계단식 스타일 시트를 사용하면 웹 요소를 마음대로 이동, 기울이기, 회전 및 변형할 수 있습니다. 이를 위해 transform 속성이 사용됩니다. 원하는 변환 유형과 정도가 값으로 지정됩니다. 이 예에서 우리는 번역 작업을 할 것입니다:

변환: 번역(50%, 50%);

번역 기능은 요소를 현재 위치에서 왼쪽/오른쪽 및 위/아래로 이동합니다. 두 개의 값이 괄호 안에 전달됩니다.

• 수평 이동 정도;
• 수직 이동 정도.

요소를 좌표 축 중 하나를 따라 이동해야 하는 경우 변환 단어 뒤에 축 이름을 지정하고 괄호 안에 필요한 이동량을 지정합니다.

변환: translateY(-20%);

일부 가이드에서는 공급업체 접두사가 포함된 변환을 볼 수 있습니다.

웹킷 변환: 번역(50%, 50%); -ms-변환: 번역(50%, 50%); 변환: 번역(50%, 50%);

2018년에는 더 이상 필요하지 않으며 Edge 및 IE를 포함한 모든 브라우저에서 속성이 지원됩니다.

필요한 DIV를 중앙에 배치하기 위해 CSS 변환 기능은 수직 및 수평 축에 대해 50% 값으로 작성됩니다. 이렇게 하면 브라우저가 요소를 현재 위치에서 너비와 높이의 절반으로 이동합니다. 너비 및 높이 속성을 지정해야 합니다.

변형 속성이 적용된 요소는 주변 개체에 관계없이 이동합니다. 한편으로 이것은 편리하지만 때때로 움직이는 DIV는 다른 컨테이너와 겹칠 수 있습니다. 따라서 웹 구성 요소를 중앙에 배치하는 이 방법은 비표준으로 간주되며 극히 필요한 경우에만 사용됩니다. 애니메이션에는 모든 CSS 표준에 따른 변환이 사용됩니다.

Flexbox 레이아웃 작업

Flexbox가 고려됩니다. 복잡한 방법으로웹 레이아웃 레이아웃. 하지만 숙달하면 생각보다 훨씬 쉽고 즐겁다는 것을 알게 될 것입니다. 표준 방법포맷. Flexbox 사양은 요소를 처리하는 유연하고 믿을 수 없을 정도로 강력한 방법입니다. 에서 영어의모듈 이름은 "유연한 컨테이너"로 번역됩니다. 너비, 높이, 요소 배열의 값은 들여쓰기 및 여백을 계산하지 않고 자동으로 조정됩니다.

이전 예제에서 이미 display 속성으로 작업했지만 블록(블록) 및 인라인(인라인 블록) 값으로 설정했습니다. 플렉스 레이아웃을 만들기 위해 display: flex를 사용할 것입니다. 먼저 플렉스 컨테이너가 필요합니다.

계단식 테이블에서 플렉스 컨테이너로 변환하려면 다음을 작성합니다.

플렉스 컨테이너(디스플레이: flex; )

그 안에 중첩된 모든 객체(직계 자식만 제외)는 플렉스 항목이 됩니다.

목록이 플렉스 컨테이너 안에 있으면 li 목록의 항목은 플렉스 항목으로 간주되지 않습니다. Flexbox 레이아웃은 ul에서만 작동합니다:

플렉스 아이템 배치 규칙

플렉스 아이템을 관리하기 위해서는 justify-content와 align-items가 필요합니다. 지정한 값에 따라 이 두 속성은 필요에 따라 개체를 자동으로 배치합니다. 중첩된 모든 DIV를 중앙에 배치해야 하는 경우 justify-content: center, align-items: center만 작성하고 다른 것은 작성하지 않습니다. 브라우저가 나머지 작업을 수행합니다.

플렉스 항목인 DIV에 텍스트를 가운데에 맞추려면 표준 텍스트 정렬 트릭을 사용할 수 있습니다. 또는 중첩된 각 DIV를 플렉스 컨테이너로 만들고 justify-content 로 콘텐츠를 관리할 수도 있습니다. 이 방법은 그래픽, 다단계 목록을 비롯한 기타 중첩 개체를 비롯한 다양한 콘텐츠가 포함되어 있는 경우 훨씬 더 합리적입니다.

각 레이아웃 디자이너는 가로 또는 세로로 블록의 콘텐츠를 정렬해야 하는 필요성에 끊임없이 직면해 있습니다. 이 주제에 대한 몇 가지 좋은 기사가 있지만 모두 흥미롭지만 실용적인 옵션은 거의 없으므로 주요 내용을 강조하기 위해 추가 시간을 낭비해야 합니다. 나는 더 이상 구글링을 하지 않기 위해 이 정보를 나에게 편리한 형태로 제출하기로 결정했다.

알려진 크기로 블록 정렬

CSS를 사용하는 가장 쉬운 방법은 미리 결정된 높이(세로 정렬의 경우) 또는 너비(가로 정렬의 경우)가 있는 상자를 정렬하는 것입니다.

패딩과의 정렬

때로는 요소를 가운데에 둘 수 없지만 속성을 사용하여 요소에 테두리를 추가할 수 있습니다. 심".

예를 들어, 200 x 200 픽셀의 그림이 있고 240 x 300 블록의 중앙에 배치하려고 합니다. 높이와 너비를 설정할 수 있습니다. 실외기= 200px이고 위쪽과 아래쪽에 20픽셀, 왼쪽과 오른쪽에 50픽셀을 추가합니다.

.example-wrapper1 ( 배경 : #535E73 ; 너비 : 200px ; 높이 : 200px ; 패딩 : 20px 50px ; )

절대 위치 블록 정렬

차단이 "로 설정된 경우 위치: 절대", "position: relative"를 사용하여 가장 가까운 부모를 기준으로 위치를 지정할 수 있습니다. 이를 위해 모든 속성(" 맨 위","오른쪽","맨 아래","왼쪽") "margin: auto" 뿐만 아니라 동일한 값을 할당하는 내부 블록.

*뉘앙스가 있습니다. 내부 블록의 너비(높이) + 왼쪽(오른쪽, 아래쪽, 위쪽) 값이 상위 블록의 크기를 초과해서는 안 됩니다. 왼쪽(오른쪽, 아래쪽, 위쪽) 속성을 0(영)으로 설정하는 것이 더 안전합니다.

.example-wrapper2 ( 위치 : 상대 ; 높이 : 250px ; 배경 : url(space.jpg) ; ) 0 ; 오른쪽 : 0 ; 여백 : 자동 ; 배경 : url(king.png) ; )

수평 정렬

"text-align: center"로 정렬

블록의 텍스트를 정렬하기 위해 특별한 속성 " 텍스트 정렬"로 설정하면 " 센터" 텍스트의 각 줄은 가로로 정렬됩니다. 여러 줄 문자이 솔루션은 극히 드물게 사용되며 더 자주 이 옵션은 범위, 링크 또는 그림을 정렬하는 데 사용할 수 있습니다.

한 때 텍스트 정렬이 작동하는 방식을 보여주기 위해 텍스트를 발명해야 했습니다. CSS 도움말하지만 흥미로운 것은 생각나지 않았다. 처음에 나는 동요를 어딘가에 복사하기로 결정했지만 이것이 기사의 독창성을 망칠 수 있고 우리의 친애하는 독자들이 Google에서 그것을 찾지 못할 수도 있다는 것을 기억했습니다. 그리고 나는 이 단락을 여기에 쓰기로 결정했습니다. 결국, 요점은 그와 일치하지 않지만 요점은 일치합니다.

.example-text ( 텍스트 정렬 : 가운데 ; 패딩 : 10px ; 배경 : #FF90B8 ; )

이 속성은 텍스트뿐만 아니라 모든 인라인 요소("디스플레이: 인라인")에서도 작동합니다.

그러나 이 텍스트는 왼쪽 정렬되지만 래퍼를 기준으로 중앙에 있는 블록에 있습니다.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : 왼쪽 ; background : #FFE5E5 ; )

여백이 있는 블록 정렬

너비가 알려진 블록 수준 요소는 "왼쪽 여백: 자동, 오른쪽 여백: 자동"으로 설정하여 가로로 쉽게 정렬됩니다. 약어는 일반적으로 사용됩니다. " 여백: 0 자동"(0 대신 값이 있을 수 있음). 그러나 수직 정렬의 경우 이 방법이 작동하지 않습니다.

.lama-wrapper ( 높이 : 200px ; 배경 : #F1BF88 ; ) .lama1 ( 높이 : 200px ; 너비 : 200px ; 배경 : url(lama.jpg) ; 여백 : 0 자동 ; )

이것이 가능한 경우(고정 또는 절대 위치 지정이 필요하지 않은 경우) 모든 블록을 정렬할 가치가 있는 방법입니다. 가장 논리적이고 적절합니다. 이것이 명백한 것처럼 보이지만 가끔 음수 들여쓰기가 포함된 위협적인 예를 보았으므로 명확히 해야 한다고 생각했습니다.

수직 정렬

수직 정렬에는 더 많은 문제가 있습니다. 분명히 이것은 CSS에서 제공되지 않았습니다. 원하는 결과를 얻는 방법에는 여러 가지가 있지만 모두 그다지 아름답지는 않습니다.

line-height 속성과 정렬

블록에 한 줄만 있는 경우 "를 적용하여 세로 정렬을 얻을 수 있습니다. 줄 높이" 및 원하는 높이로 설정합니다. 안전을 위해 "높이"도 설정해야 합니다. 이 값은 "줄 높이" 값과 같을 것입니다. 후자는 모든 브라우저에서 지원되지 않기 때문입니다.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

블록을 여러 줄로 정렬하는 것도 가능합니다. 이렇게 하려면 추가 래퍼 블록을 사용하고 줄 높이를 설정해야 합니다. 내부 블록은 여러 줄로 구성될 수 있지만 "인라인"이어야 합니다. "vertical-align: middle"을 적용해야 합니다.

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; )

래퍼 블록에는 "글꼴 크기: 0"이 설정되어 있어야 합니다. 글꼴 크기를 0으로 설정하지 않으면 브라우저가 자체적으로 몇 픽셀을 추가합니다. 내부 블록의 글꼴 크기와 줄 높이도 지정해야 합니다. 이러한 속성은 부모로부터 상속되기 때문입니다.

테이블의 수직 정렬

재산 " 수직 정렬"도 테이블 셀에 영향을 줍니다. 값을 "중간"으로 설정하면 셀 내부의 내용이 중앙에 배치됩니다. 물론 오늘날에는 테이블 형식 레이아웃이 구식으로 간주되지만 예외적인 경우 ""를 지정하여 시뮬레이션할 수 있습니다. 디스플레이: 테이블 셀".

저는 일반적으로 수직 정렬에 이 옵션을 사용합니다. 다음은 기성품 프로젝트에서 가져온 레이아웃의 예입니다. 이와 같이 세로로 중앙에 배치된 사진이 눈길을 끈다.

.one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img ( max-height : 169px ; max-width : 100 % ; 최소 너비: 140px ; 디스플레이: 블록 ; 여백: 0 자동 ; )

요소에 "none" 이외의 "float" 세트가 있는 경우 여전히 블록(디스플레이: 블록)이 된다는 점을 기억해야 합니다. 그러면 추가 블록 래퍼를 사용해야 합니다.

추가 인라인 요소와의 정렬

인라인 요소의 경우 " 수직 정렬: 중간". 이 경우 " 디스플레이: 인라인" 같은 줄에 있는 것은 공통 중심선에 맞춰 정렬됩니다.

상위 블록의 높이와 동일한 높이로 보조 블록을 생성해야 원하는 블록이 중앙에 배치됩니다. 이를 위해 pseudo-elements:before or:after를 사용하는 것이 편리합니다.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png ) ; background-color : # fff ; 너비 : 200px ; 높이 : 200px ; ) .riki ( 디스플레이 : 인라인 블록 ; 높이 : 100% ; 수직 정렬 : 중간 ; )

디스플레이: 플렉스 및 정렬

Explorer 8 사용자에 대해 별로 관심이 없거나 사용자를 위해 추가 자바스크립트를 추가하려는 경우 "display: flex"를 사용할 수 있습니다. Flex 상자는 정렬 문제를 정말 잘 처리하며 "margin: auto"를 작성하여 콘텐츠를 내부 중앙에 배치하는 것으로 충분합니다.

지금까지이 방법은 실제로 나를 만난 적이 없지만 특별한 제한은 없습니다.

.example-wrapper7 (디스플레이: flex ; 높이: 300px ; 배경: #AEB96A ; ) .example-wrapper7 img (여백: 자동 ; )

글쎄, 그게 내가 쓰고 싶었던 전부야 CSS 정렬. 이제 콘텐츠 중심에 문제가 없을 것입니다!