매우 자주 작업은 페이지/화면 중앙에 블록을 정렬하는 것입니다. 심지어 Java 스크립트 없이도 엄격한 크기나 음수 들여쓰기를 설정하지 않고 블록이 해당 크기를 초과하면 스크롤 막대가 상위 항목에 대해 작동하도록 합니다. . 블록을 화면 중앙에 정렬하는 방법에 대한 단조로운 예가 인터넷에 꽤 많이 있습니다. 일반적으로 대부분은 동일한 원칙을 기반으로 합니다.
다음은 문제를 해결하는 주요 방법과 장단점입니다. 예제의 본질을 이해하려면 제공된 링크의 예제에서 결과 창의 높이/너비를 줄이는 것이 좋습니다.
옵션 1: 음수 들여쓰기.
포지셔닝 차단하다위쪽 및 왼쪽 속성을 50% 사용하고 블록의 높이와 너비를 미리 알고 크기의 절반에 해당하는 음수 여백을 설정합니다. 차단하다. 이 옵션의 가장 큰 단점은 음수 들여쓰기를 계산해야 한다는 것입니다. 또한 차단하다스크롤 막대로 둘러싸여 있으면 제대로 작동하지 않습니다. 음수 여백이 있기 때문에 단순히 잘립니다.
상위(너비: 100%; 높이: 100%; 위치: 절대; 위쪽: 0; 왼쪽: 0; 오버플로: 자동; ) .block( 너비: 250px; 높이: 250px; 위치: 절대; 위쪽: 50%; 왼쪽 : 50%; 여백: -125px 0 0 -125px; img ( 최대 너비: 100%; 높이: 자동; 디스플레이: 블록; 여백: 0 자동; 테두리: 없음; ) )
옵션 2. 자동 들여쓰기.
덜 일반적이지만 첫 번째와 유사합니다. 을 위한 차단하다너비와 높이를 설정하고 오른쪽 위 아래 왼쪽 속성을 0으로 배치하고 여백을 자동으로 설정합니다. 이 옵션의 장점은 스크롤 막대가 작동한다는 것입니다. 부모의, 후자가 너비와 높이가 100%인 경우. 이 방법의 단점은 치수 설정이 엄격하다는 것입니다.
상위(너비: 100%; 높이: 100%; 위치: 절대; 위쪽: 0; 왼쪽: 0; 오버플로: 자동; ) .block( 너비: 250px; 높이: 250px; 위치: 절대; 위쪽: 0; 오른쪽: 0; 하단: 0; 왼쪽: 0; 여백: 자동; img ( 최대 너비: 100%; 높이: 자동; 디스플레이: 블록; 여백: 0 자동; 테두리: 없음; ) )
옵션 3. 테이블.
물어 보자 부모의테이블 스타일, 셀 부모의텍스트 정렬을 가운데로 설정합니다. ㅏ 차단하다라인 블록 모델을 설정했습니다. 우리가 얻는 단점은 작동하지 않는 스크롤바이며, 일반적으로 테이블의 "에뮬레이션"의 미학은 그렇지 않습니다.
상위( 너비: 100%; 높이: 100%; 디스플레이: 테이블; 위치: 절대; 위쪽: 0; 왼쪽: 0; > .inner( 디스플레이: 테이블 셀; 텍스트 정렬: 중앙; 수직 정렬: 중간; ) ) .block ( 디스플레이: inline-block; img ( 디스플레이: 블록; 테두리: 없음; ) )
이 예에 스크롤을 추가하려면 디자인에 요소를 하나 더 추가해야 합니다.
예: jsfiddle.net/serdidg/fk5nqh52/3.
옵션 4. 의사 요소.
이 옵션은 이전 방법에 나열된 모든 문제가 없으며 원래 문제도 해결합니다. 요점은 부모의스타일 설정 의사 요소이전에는 높이 100%, 중앙 정렬 및 인라인 블록 모델이었습니다. 와 마찬가지야 차단하다라인 블록 모델이 중앙에 설정됩니다. 에게 차단하다아래에 "떨어지지" 않았습니다 의사 요소, 첫 번째 치수가 다음보다 큰 경우 부모의, 나타내다 부모의공백: nowrap 및 글꼴 크기: 0, 그 이후 차단하다공백: 일반을 사용하여 이러한 스타일을 취소하세요. 안에 이 예에서는글꼴 크기: 사이의 결과 공백을 제거하려면 0이 필요합니다. 부모의그리고 차단하다코드 형식 때문에. 그 공간은 다른 방법으로 제거할 수도 있지만, 그냥 피하는 것이 최선이라고 생각됩니다.
상위( 너비: 100%; 높이: 100%; 위치: 절대; 상단: 0; 왼쪽: 0; 오버플로: 자동; 공백: nowrap; 텍스트 정렬: 중앙; 글꼴 크기: 0; &:이전( 높이: 100%; 디스플레이: 인라인 블록; 수직 정렬: 중간; 콘텐츠: ""; ) .block ( 디스플레이: 인라인 블록; 공백: 일반; 수직 정렬: 중간; 텍스트 정렬: 왼쪽 ; img (디스플레이: 블록; 테두리: 없음; ) )
또는 전체 페이지가 아닌 창의 높이와 너비만 차지하도록 부모가 필요한 경우:
상위( 위치: 고정; 위쪽: 0; 오른쪽: 0; 아래쪽: 0; 왼쪽: 0; 오버플로: 자동; 공백: nowrap; 텍스트 정렬: 중앙; 글꼴 크기: 0; &:앞( 높이: 100%; 디스플레이: 인라인 블록; 수직 정렬: 중간; 내용: ""; ) .block ( 디스플레이: 인라인 블록; 공백: 일반; 수직 정렬: 중간; 텍스트 정렬: 왼쪽; img ( 표시: 블록; 테두리: 없음; ) )
옵션 5. Flexbox.
가장 간단하고 우아한 방법 중 하나는 Flexbox를 사용하는 것입니다. 불필요한 신체 움직임이 필요하지 않으며, 일어나는 일의 본질을 매우 명확하게 설명하며 유연성이 뛰어납니다. 선택할 때 기억할 가치가 있는 유일한 것 이 방법- 버전 10부터 IE를 지원합니다. caniuse.com/#feat=flexbox
상위(너비: 100%; 높이: 100%; 위치: 고정; 위쪽: 0; 왼쪽: 0; 디스플레이: flex; align-items: 센터; align-content: 센터; justify-content: 센터; 오버플로: 자동; ) .block ( 배경: #60a839; img ( 디스플레이: 블록; 테두리: 없음; ) )
옵션 6. 변환.
구조에 의해 제한되고 상위 요소를 조작할 방법이 없지만 블록을 어떻게든 정렬해야 하는 경우에 적합합니다. CSS가 구조에 올 것이다 번역 기능(). 50% 절대 위치 지정 값은 블록의 왼쪽 상단 모서리를 정확히 중앙에 배치하고 음수 변환 값은 자체 치수를 기준으로 블록을 이동합니다. 가장자리가 흐려지거나 글꼴 스타일이 나타나는 등 부정적인 영향이 나타날 수 있다는 점에 유의하세요. 또한, 이 방법은 자바스크립트를 사용하여 블록의 위치를 계산하는데 문제가 발생할 수 있으며, 때로는 너비의 50% 손실을 보상하기 위해 사용됩니다. CSS를 사용하여 left 속성은 블록에 지정된 규칙으로 도움을 받을 수 있습니다: margin-right: -50%; .
상위( 너비: 100%; 높이: 100%; 위치: 고정; 위쪽: 0; 왼쪽: 0; 오버플로: 자동; ) .block( 위치: 절대; 위쪽: 50%; 왼쪽: 50%; 변환: 변환( -50%, -50%); img ( 디스플레이: 블록; ) )
옵션 7. 버튼.
사용자 옵션 차단하다버튼 태그로 구성되어 있습니다. 버튼에는 그 안에 있는 모든 것, 즉 인라인 및 블록라인(인라인-블록) 모델의 요소를 중앙에 배치하는 속성이 있습니다. 실제로는 사용을 권장하지 않습니다.
상위( 너비: 100%; 높이: 100%; 위치: 절대; 위쪽: 0; 왼쪽: 0; 오버플로: 자동; 배경: 없음; 테두리: 없음; 윤곽선: 없음; ) .block ( 디스플레이: 인라인 블록; img (디스플레이: 블록;; 테두리: 없음; ) )
보너스
네 번째 옵션의 아이디어를 사용하여 외부 여백을 설정할 수 있습니다. 차단하다, 후자는 스크롤바로 둘러싸여 적절하게 표시됩니다.예: jsfiddle.net/serdidg/nfqg9rza/2.
이미지를 중앙에 정렬할 수도 있으며, 이미지가 더 큰 경우에는 부모의, 크기에 맞게 조정 부모의.
예: jsfiddle.net/serdidg/nfqg9rza/3.
큰 그림의 예:
CSS에서 텍스트를 세로로 정렬- 아주 어려운 일이에요. 나는 실제 반응형 디자인과 관련하여 "중요한" 오류를 계속 발견할 정도로 많은 사람들이 이 문제로 어려움을 겪는 것을 보았습니다.
하지만 두려워하지 마세요. 이미 CSS 수직 정렬로 어려움을 겪고 있다면 제대로 찾아오셨습니다.
CSS 수직 정렬 속성에 대해 이야기해 보겠습니다.
처음 웹 개발 작업을 시작했을 때 이 속성 때문에 약간 어려움을 겪었습니다. 나는 그것이 고전적인 재산처럼 작동해야 한다고 생각했습니다." 텍스트 정렬" 아, 모든 것이 그렇게 간단했다면...
수직 정렬 CSS 속성테이블에서는 잘 작동하지만 div나 다른 요소에서는 작동하지 않습니다. div에서 사용하면 다른 div를 기준으로 요소가 정렬되지만 콘텐츠는 정렬되지 않습니다. 이 경우 속성은 display: inline-block;에서만 작동합니다. .
예시 보기
우리는 div 자체가 아닌 콘텐츠를 중앙에 두고 싶습니다!
두 가지 옵션이 있습니다. 텍스트가 포함된 div 요소만 있는 경우 line-height 속성을 사용할 수 있습니다. 즉, 요소의 높이를 알아야 하지만 설정할 수는 없습니다. 이렇게 하면 텍스트가 항상 중앙에 위치하게 됩니다.
이 접근법의 진실 CSS 수직 정렬단점이 있습니다. 텍스트가 여러 줄이면 줄 높이에 줄 수를 곱합니다. 아마도 이 경우 페이지 레이아웃이 매우 엉망이 될 것입니다.
이 예를 살펴보세요
중앙에 배치하려는 콘텐츠가 두 줄 이상으로 구성된 경우 테이블 div를 사용하는 것이 좋습니다. 테이블을 사용할 수도 있지만 이는 의미상 올바르지 않습니다. 반응형 목적으로 중단이 필요한 경우 div 요소를 사용하는 것이 좋습니다.
이것이 작동하려면 디스플레이: 테이블과 그 내부에 상위 컨테이너가 있어야 합니다. 필요 수량 display: table-cell 및 Vertical-align: middle 을 사용하여 가운데에 배치하려는 열.
예시 보기
이것이 테이블 마크업에서는 작동하지만 div 요소에서는 작동하지 않는 이유는 무엇입니까? 테이블의 행 높이가 동일하기 때문입니다. 테이블 셀의 콘텐츠가 사용 가능한 높이 공간을 모두 사용하지 않는 경우 브라우저는 콘텐츠를 중앙에 배치하기 위해 자동으로 세로 패딩을 추가합니다.
위치 속성
CSS div 수직 정렬의 기본부터 시작해 보겠습니다.
- 위치: 정적이 기본값입니다. 요소는 HTML 순서에 따라 렌더링됩니다.
- 위치: 절대 - 요소의 정확한 위치를 결정하는 데 사용됩니다. 이 위치는 항상 상대적으로 위치가 가장 가까운 상위 요소와 관련됩니다. 공전). 요소의 정확한 위치를 결정하지 않으면 해당 요소에 대한 제어력을 잃게 됩니다. 문서의 흐름을 완전히 무시하고 무작위로 나타납니다. 기본적으로 요소는 왼쪽 상단에 나타납니다.
- position:relative - 일반 위치(정적)를 기준으로 요소의 위치를 지정하는 데 사용됩니다. 이 값은 문서 흐름 순서를 유지합니다.
- 위치: 고정 - 브라우저 창을 기준으로 요소를 배치하여 뷰포트에 항상 표시되도록 하는 데 사용됩니다.
참고: 일부 속성( 상단 및 Z-색인) 요소가 위치로 설정된 경우에만 작동합니다. 공전).
사업을 시작합시다!
구현하시겠습니까? CSS 정렬수직으로 중앙에 위치? 먼저 상대 위치와 크기를 사용하여 요소를 만듭니다. 예: 너비와 높이가 100%입니다.
두 번째 단계는 대상 브라우저에 따라 다를 수 있지만 다음 두 가지 옵션 중 하나를 사용할 수 있습니다.
- 이전 속성: 너비와 높이의 절반을 제거하려면 창의 정확한 크기를 알아야 합니다. 예시 보기;
- 새로운 CSS3 속성: 변환 값이 50%인 변환 속성을 추가할 수 있으며 블록은 항상 중앙에 있습니다. 예시 보기.
기본적으로 콘텐츠를 중앙에 배치하려면 상단을 사용하지 않음: 40%또는 왼쪽: 300px . 테스트 화면에서는 잘 작동하지만 중앙에 위치하지 않습니다.
위치 기억하기: 고정 ? 절대 위치와 동일한 작업을 수행할 수 있지만 상위 요소에 대한 상대 위치는 필요하지 않습니다. 상위 요소는 항상 브라우저 창을 기준으로 배치됩니다.
Flexbox 사양에 대해 들어보셨나요?
플렉스박스를 사용할 수 있습니다. 이것은 다른 옵션보다 훨씬 낫습니다. 텍스트 정렬 CSS 센터수직으로. Flexbox를 사용하면 요소를 관리하는 것이 어린이 놀이와 같습니다. 문제는 IE9 및 아래 버전과 같은 일부 브라우저를 폐기해야 한다는 것입니다. 다음은 블록을 세로 중앙에 배치하는 방법에 대한 예입니다.
예시 보기
Flexbox 레이아웃을 사용하면 여러 블록을 중앙에 배치할 수 있습니다.
이 예제에서 배운 내용을 적용하면 마스터할 수 있습니다. CSS 수직 블록 정렬최대한 빨리.
링크 및 추가 자료
CSS 마크업 학습
FlexBox 개구리
Flexbox 샌드박스
기사 번역 “ 모든 사람을 위한 CSS 수직 정렬(인형 포함)”은 친절한 프로젝트 팀이 준비했습니다.
페이지를 레이아웃할 때 CSS 방법을 사용하여 중앙 정렬을 수행해야 하는 경우가 많습니다. 예를 들어 메인 블록을 중앙에 배치합니다. 이 문제를 해결하기 위한 몇 가지 옵션이 있으며, 각 옵션은 조만간 레이아웃 디자이너가 사용해야 합니다.
가운데 텍스트 정렬
종종 장식 목적으로 텍스트를 가운데 정렬로 설정해야 하는데, 이 경우 CSS를 사용하면 레이아웃 시간을 줄일 수 있습니다. 이전에는 HTML 속성을 사용하여 이 작업을 수행했지만 이제 표준에서는 스타일 시트를 사용하여 텍스트를 정렬해야 합니다. 여백을 변경해야 하는 블록과 달리 CSS에서는 텍스트 중앙 정렬이 한 줄을 사용하여 수행됩니다.
- 텍스트 정렬:가운데;
이 속성은 상속되어 상위 항목에서 모든 하위 항목으로 전달됩니다. 텍스트뿐만 아니라 다른 요소에도 영향을 미칩니다. 이렇게 하려면 인라인(예: 스팬) 또는 인라인 블록(display: block 속성이 설정된 모든 블록)이어야 합니다. 후자의 옵션을 사용하면 요소의 너비와 높이를 변경하고 들여쓰기를 보다 유연하게 조정할 수도 있습니다.
페이지에서는 종종 태그 자체에 정렬이 할당됩니다. W3C가 정렬 속성을 더 이상 사용하지 않으므로 코드가 즉시 무효화됩니다. 페이지에서 사용하는 것은 권장되지 않습니다.
블록을 중앙에 정렬하기
설정해야 하는 경우 div 정렬중앙 집중형, CSS는 꽤 많은 것을 제공합니다 편리한 방법: 바깥쪽 여백을 사용합니다. 블록 요소와 인라인 블록 요소 모두에 대해 들여쓰기를 설정할 수 있습니다. 속성 값은 0(세로 채우기) 및 자동(자동 가로 채우기)이어야 합니다.
- 여백:0 자동;
이제 이 옵션은 절대적으로 유효한 것으로 인식됩니다. 외부 패딩을 사용하면 이미지가 중앙에 오도록 설정할 수도 있습니다. 이를 통해 페이지의 요소 위치 지정과 관련된 많은 문제를 해결할 수 있습니다.
블록을 왼쪽이나 오른쪽으로 정렬
CSS 중심 정렬이 필요하지 않은 경우도 있지만 두 개의 블록을 나란히 배치해야 합니다. 하나는 왼쪽 가장자리에, 다른 하나는 오른쪽에 배치해야 합니다. 이를 위해 왼쪽, 오른쪽 또는 없음의 세 가지 값 중 하나를 취할 수 있는 부동 속성이 있습니다. 나란히 배치해야 하는 두 개의 블록이 있다고 가정해 보겠습니다. 그러면 코드는 다음과 같습니다.
- .left(부동:왼쪽;)
- .right(부동:오른쪽)
처음 두 블록(예: 바닥글) 아래에 위치해야 하는 세 번째 블록도 있는 경우에는 명확한 속성을 제공해야 합니다.
- .left(부동:왼쪽;)
- .right(부동:오른쪽)
- 바닥글(지우기:둘 다)
사실 왼쪽과 오른쪽 클래스가 있는 블록은 일반적인 흐름에서 벗어납니다. 즉, 다른 모든 요소는 정렬된 요소의 존재 자체를 무시합니다. Clear:both 속성을 사용하면 바닥글이나 다른 블록이 흐름에서 벗어난 요소를 볼 수 있으며 왼쪽과 오른쪽 모두에서 부동을 금지합니다. 따라서 이 예에서는 바닥글이 아래로 이동합니다.
수직 정렬
CSS 메소드를 사용하여 중앙 정렬을 설정하는 것만으로는 충분하지 않은 경우가 있으며, 하위 블록의 수직 위치도 변경해야 합니다. 모든 인라인 또는 인라인 블록 요소는 위쪽이나 아래쪽 가장자리, 상위 요소의 중간 또는 모든 위치에 중첩될 수 있습니다. 대부분의 경우 블록을 중앙에 정렬해야 하며 이를 위해 수직 정렬 속성이 사용됩니다. 두 개의 블록이 있고 하나가 다른 블록 안에 중첩되어 있다고 가정해 보겠습니다. 이 경우 내부 블록은 인라인 블록 요소(표시: inline-block)입니다. 하위 블록을 수직으로 정렬해야 합니다.
- 상단 정렬 - .child(vertical-align:top);
- 중앙 정렬 - .child(vertical-align:middle);
- 아래쪽 정렬 - .child(vertical-align:bottom);
text-align이나 수직 정렬 모두 블록 요소에 영향을 주지 않습니다.
정렬된 블록에 발생할 수 있는 문제
때때로 CSS를 사용하여 div를 중앙에 배치하면 약간의 문제가 발생할 수 있습니다. 예를 들어 float를 사용할 때 .first, .second 및 .third라는 세 개의 블록이 있다고 가정해 보겠습니다. 두 번째와 세 번째 블록은 첫 번째 블록에 있습니다. 두 번째 클래스의 요소는 왼쪽 정렬되고 마지막 블록은 오른쪽 정렬됩니다. 수평을 맞춘 후 둘 다 흐름에서 떨어졌습니다. 상위 요소에 높이가 설정되지 않은 경우(예: 30em) 더 이상 하위 블록의 높이까지 늘어나지 않습니다. 이 오류를 방지하려면 .second 및 .third를 표시하는 특수 블록인 "spacer"를 사용하십시오. CSS 코드:
- .초(부동 소수점:왼쪽)
- .세 번째(float:오른쪽)
- .clearfix(높이:0; 지우기: 둘 다;)
의사 클래스:after가 자주 사용되며, 이를 통해 의사 스페이서를 생성하여 블록을 해당 위치로 되돌릴 수도 있습니다(예제에서는 컨테이너 클래스가 있는 div가 inside.first 및 contain.left 및 .right에 있음). :
- .left(부동:왼쪽)
- .right(부동:오른쪽)
- .container:after(content:""; 디스플레이:테이블; 클리어:모두;)
위의 옵션이 가장 일반적이지만 몇 가지 변형이 있습니다. 실험을 통해 의사 스페이서를 생성하는 가장 간단하고 편리한 방법을 항상 찾을 수 있습니다.
레이아웃 디자이너가 자주 직면하는 또 다른 문제는 인라인 블록 요소의 정렬입니다. 각 항목 뒤에 공백이 자동으로 추가됩니다. 음수 들여쓰기로 설정된 margin 속성은 이에 대처하는 데 도움이 됩니다. 훨씬 덜 자주 사용되는 다른 방법이 있습니다(예: 제로화). 이 경우 글꼴 크기: 0이 상위 요소의 속성에 기록됩니다. 블록 안에 텍스트가 있으면 필요한 글꼴 크기가 인라인 블록 요소의 속성에 이미 반환되어 있습니다. 예를 들어 글꼴 크기:1em입니다. 이 방법이 항상 편리한 것은 아니므로 외부 들여쓰기 옵션이 훨씬 더 자주 사용됩니다.
블록을 정렬하면 아름답고 기능적인 페이지를 만들 수 있습니다. 여기에는 전체 레이아웃의 레이아웃, 온라인 상점의 제품 배열, 명함 웹사이트의 사진이 포함됩니다.
좋은 하루 되세요, 이 출판물의 구독자 및 독자 여러분. 오늘은 CSS에서 텍스트를 중앙에 배치하는 방법에 대해 자세히 설명하겠습니다. 이전 기사에서 이 주제에 대해 간접적으로 다루었으므로 이 분야에 대한 지식이 어느 정도 있으실 것입니다.
그러나 이 간행물에서는 개체를 정렬하는 다양한 방법에 대해 설명하고 단락을 들여쓰고 수정하는 방법도 설명합니다. 그럼 자료 학습을 시작하겠습니다!
HTML과 그 자손 그리고 정렬
이 방법은 계단식 스타일 시트 도구로 대체되었기 때문에 거의 사용되지 않습니다. 그러나 그러한 태그가 존재한다는 것을 아는 것은 당신에게 해를 끼치 지 않습니다.
검증에 관해서 ( 금기기사 "")에 자세히 설명되어 있으면 html 사양 자체에서 사용을 비난합니다. < 센터>, 유효성을 위해서는 전환을 사용해야 하기 때문에 문서 유형>.
이 유형금지된 요소가 통과하도록 허용합니다.
이제 속성으로 넘어가겠습니다. 맞추다. 객체의 수평 정렬을 설정하고 태그 선언 뒤에 맞춥니다. 일반적으로 콘텐츠를 왼쪽으로 정렬하는 데 사용할 수 있습니다( 왼쪽), 오른쪽 가장자리를 따라( 오른쪽), 중심 ( 센터) 및 텍스트 너비 기준( 신이 옳다고 하다).
아래에서는 그림과 문단을 중앙에 배치하는 예를 들어 보겠습니다.
이 콘텐츠는 중앙에 배치됩니다.
이미지의 경우 분석 중인 속성의 의미가 약간 다릅니다.
내가 사용한 예에서는 정렬="가운데". 덕분에 문장이 사진 중앙에 또렷하게 위치하도록 이미지가 정렬됐다.
CSS의 센터링 도구
블록, 텍스트 및 그래픽 콘텐츠를 정렬하도록 설계된 CSS 속성이 훨씬 더 자주 사용됩니다. 이는 주로 스타일 구현의 편리성과 유연성 때문입니다.
그럼 텍스트 센터링의 첫 번째 속성부터 시작해 보겠습니다. 텍스트-맞추다.
align in 과 동일한 방식으로 작동합니다. 키워드 중 일반 목록에서 하나를 선택하거나 조상의 특성을 상속받을 수 있습니다( 상속하다).
CSS3에서는 2개의 매개변수를 더 설정할 수 있다는 점에 주목하고 싶습니다. 시작– 텍스트 작성 규칙에 따라(오른쪽에서 왼쪽으로 또는 그 반대로) 왼쪽 또는 오른쪽으로 정렬을 설정합니다(작업 왼쪽 또는 오른쪽과 유사). 끝– 시작의 반대입니다(텍스트를 왼쪽에서 오른쪽으로 쓰면 오른쪽으로 작동하고, 오른쪽에서 왼쪽 – 왼쪽으로 쓰면 오른쪽으로 작동합니다).
오른쪽 문장
end를 사용한 문장
작은 트릭에 대해 말씀 드리겠습니다. 값을 선택할 때 신이 옳다고 하다마지막 줄은 바닥에 매력적이지 않게 매달려 있을 수 있습니다. 예를 들어 중앙에 배치하려면 속성을 사용할 수 있습니다. 텍스트 정렬 마지막.
사이트 콘텐츠나 표 셀을 수직으로 정렬하려면 속성을 사용하세요. 수직 정렬. 아래에 주요 내용을 설명했습니다. 키워드요소.
| 예어 | 목적 |
| 기준선 | 기준선이라고 하는 조상 선에 대한 정렬을 지정합니다. 조상 객체에 그러한 선이 없으면 아래쪽 테두리를 따라 정렬됩니다. |
| 가운데 | 변형된 객체의 중앙은 부모 요소의 높이 바닥이 추가된 기준선에 정렬됩니다. |
| 맨 아래 | 선택한 콘텐츠의 하단이 그 아래 개체의 하단에 맞게 조정됩니다. |
| 맨 위 | 하단과 유사하지만 개체의 상단 부분이 있습니다. |
| 감독자 | 문자를 위 첨자로 만듭니다. |
| 보결 | 요소를 첨자로 만듭니다. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
씨 안에이자형 티에 대한에게
|
들여쓰기
그리고 마지막으로 단락 들여쓰기에 이르렀습니다. CSS 언어는 다음과 같은 특별한 속성을 사용합니다. 텍스트 들여쓰기.
도움을 받으면 빨간색 선과 돌출부를 모두 만들 수 있습니다(음수 값을 지정해야 함).
빨간색 선을 만들려면 매개변수 하나만 알면 됩니다.
이는 간단한 텍스트 들여쓰기 속성입니다.
각 사례를 실제로 시도해 본 분들을 칭찬합니다. 내 블로그 링크를 친구에게 보내고 구독하는 것을 잊지 마세요. 행운을 빌어요! 안녕!
감사합니다, Roman Chueshov
읽다: 675회
웹 사이트 페이지의 레이아웃과 중앙 정렬은 창의적인 노력이며 종종 초보자에게 어려움을 야기합니다. 그럼 어떻게 하는지 살펴보겠습니다. 다음과 같은 구조의 페이지를 만들고 싶다고 가정해 보겠습니다.
우리 페이지는 헤더, 메뉴, 콘텐츠, 바닥글의 네 가지 블록으로 구성됩니다. 페이지를 중앙에 배치하기 위해 다음 네 개의 블록을 하나의 기본 블록에 배치합니다.
사이트 헤더
콘텐츠
사이트 하단
이 구조를 예로 사용하여 몇 가지 옵션을 고려해 보겠습니다.
고무 사이트의 레이아웃 및 센터링
고무 사이트를 배치할 때 사용되는 기본 측정 단위는 -%입니다. 사이트가 너비에 걸쳐 늘어나서 모든 여유 공간을 차지해야 하기 때문입니다.
따라서 "머리글" 및 "바닥글" 블록의 너비는 화면 너비의 100%가 됩니다. "메뉴" 블록의 너비를 30%로 하고 "콘텐츠" 블록은 "메뉴" 블록 옆에 위치해야 합니다. 즉, "메뉴" 블록의 너비와 동일한 너비의 왼쪽 여백(margin-left)이 있어야 합니다. 즉, 서른%.
"메뉴" 블록과 "콘텐츠" 블록을 나란히 배치하려면 "메뉴" 블록을 부동으로 만들고 왼쪽 가장자리로 밀어보겠습니다. 또한 블록의 배경색도 설정합니다. 이제 이 모든 내용을 스타일 시트(style.css 페이지)에 작성해 보겠습니다.
#header( 배경:#3e4982; 너비:100%; 높이:110px; 텍스트 정렬:중심; 색상:#FFFFFF; 글꼴 크기:24px; 패딩 상단:40px; ) #menu( 배경:#6173cb; 부동 :왼쪽; 너비:30%; 높이:300px; 텍스트 정렬:가운데; 색상:#FFFFFF; 글꼴 크기:18px; 패딩 상단:10px; ) #content( 배경:#ffffff; 왼쪽 여백:30% ; 높이:300px; 텍스트 정렬:중심; ) #footer( 배경:#3e4982; 지우기:모두; 너비:100%; 높이:50px; 텍스트 정렬:중심; 색상:#FFFFFF; 글꼴 크기:14px; 패딩 상단:10px; )
블록의 높이는 결과가 보이도록 조건부로 설정되었습니다. 브라우저에서 우리 페이지를 보십시오:
브라우저 창의 크기를 변경하면 모든 블록의 너비가 변경됩니다. 항상 편리한 것은 아니기 때문에... 메뉴 블록을 늘리면 빈 공간이 나타납니다. 따라서 “메뉴” 블록의 너비는 고정되어 있는 경우가 많으므로 동일하게 하도록 하겠습니다. 이렇게 하려면 스타일 시트에서 해당 속성의 값을 바꾸십시오.
... #메뉴( 배경:#6173cb; 부동:왼쪽; 너비:200px; 높이:300px; ) #content( 배경:#ffffff; 여백-왼쪽:200px; 높이:300px; ) ...
이제 페이지가 더욱 자연스럽게 늘어납니다. 유동 레이아웃을 사용하면 페이지가 화면의 전체 너비를 차지하므로 페이지 정렬이 필요하지 않습니다.
그러나 원할 경우 페이지의 화면 왼쪽과 오른쪽 여백이 동일하도록 만들 수 있습니다. 이렇게 하려면 다른 모든 블록의 컨테이너인 "기본" 블록에 스타일을 추가해야 합니다.
이제 우리 페이지는 다음과 같습니다:
사이트 레이아웃 및 센터링, 고정 너비
이 경우 블록에 고정 크기를 설정해야 합니다.
#main(너비:800px; ) #header(배경:#3e4982; 너비:800px; 높이:150px; 텍스트 정렬:중심; 색상:#FFFFFF; 글꼴 크기:24px; 패딩 상단:40px; ) #메뉴 ( 배경:#6173cb; 부동:왼쪽; 너비:200px; 높이:300px; 텍스트 정렬:중앙; 색상:#FFFFFF; 글꼴 크기:18px; 패딩 상단:10px; ) #content( 배경:#ffffff; 여백-왼쪽:200px; 높이:300px; 텍스트 정렬:중심; ) #footer( 배경:#3e4982; 지우기:모두; 너비:800px; 높이:50px; 텍스트 정렬:중심; 색상:#FFFFFF; 글꼴- 크기:14px; 패딩 상단:10px; )
이제 페이지가 화면 왼쪽 가장자리에 눌려졌습니다.
이 경우 사이트 페이지의 중앙 정렬은 다음과 같이 수행할 수 있습니다. 우리 페이지에는 너비와 패딩을 지정할 수도 있는 "body" 태그가 있다는 것을 기억하세요.
이렇게 해 봅시다. "body" 태그에 너비를 800픽셀("main" 블록과 유사)로 지정하고 왼쪽 여백을 50%로 지정합니다. 그러면 "기본" 블록의 전체 내용이 화면 오른쪽(즉, 가운데에서 오른쪽으로)에 표시됩니다.
“main” 블록이 화면 중앙에 위치하려면 그 중앙이 “body” 태그의 중앙과 일치해야 합니다. 저것들. "메인" 블록을 크기의 절반만큼 왼쪽으로 이동해야 합니다. "main" 블록의 너비는 800픽셀입니다. 즉, "margin-left:-400px" 속성을 설정해야 함을 의미합니다. 예, 이 속성은 음수 값을 가질 수 있으며, 그러면 왼쪽 여백이 줄어듭니다(예: 왼쪽으로 이동). 이것이 바로 우리에게 필요한 것입니다.
이제 스타일 시트는 다음과 같습니다.
body( 폭:800px; padding-left:50%; ) #main( 폭:800px; margin-left:-400px; ) #header( 배경:#3e4982; 폭:800px; 높이:150px; 텍스트 정렬:가운데 ; 색상:#FFFFFF; 글꼴 크기:24px; 패딩 상단:40px; ) #메뉴( 배경:#6173cb; 부동 소수점: 왼쪽; 너비: 200px; 높이: 300px; 텍스트 정렬: 중앙; 색상:#FFFFFF; 글꼴 크기: 18px; 패딩 상단: 10px; ) #content( 배경:#ffffff; 여백 왼쪽: 200px; 높이: 300px; 텍스트 정렬: 중앙; ) #footer( 배경:#3e4982; 지우기: 둘 다; 너비:800px; 높이:50px; 텍스트 정렬:중심; 색상:#FFFFFF; 글꼴 크기:14px; 패딩 상단:10px; )
브라우저의 페이지는 정확히 중앙에 있습니다.
우리는 사이트 페이지를 중앙에 배치하기 위한 두 가지 옵션을 살펴보았지만 사실 이는 교리가 아닙니다. 자신만의 버전을 실험하고 생각해 볼 수 있습니다. 다양한 브라우저에서 어떻게 작동하는지 확인해 보세요. 불행하게도 FireFox나 Opera에서는 잘 표시되는 것이 IE에서는 전혀 이해할 수 없게 표시될 수 있으며 그 반대의 경우도 마찬가지입니다. 그리고 우리는 이것을 기억해야 합니다.
창의적인 탐구에 행운을 빕니다!
