집 안전 요소의 수평 및 수직 정렬. HTML에서 페이지의 중앙, 너비, 가장자리에 텍스트 정렬을 만드는 방법

요소의 수평 및 수직 정렬. HTML에서 페이지의 중앙, 너비, 가장자리에 텍스트 정렬을 만드는 방법

요소를 가로 및 세로로 정렬하는 방법은 다양합니다. 방법 선택은 요소 유형(블록 또는 인라인), 위치 유형, 크기 등에 따라 다릅니다.

1. 블록/페이지 중앙에 가로 맞춤

1.1. 블록에 너비가 있는 경우:

div ( 너비: 300px; 여백: 0 auto; /*상위 블록 내에서 수평으로 요소를 중앙에 배치*/ )

인라인 요소를 이런 식으로 정렬하려면 display: block;

1.2. 블록이 다른 블록 내에 중첩되어 있고 이에 대해 설정된 너비/폭이 없는 경우:

.wrapper(텍스트 정렬:중앙;)

1.3. 블록에 너비가 있고 상위 블록의 중앙에 고정되어야 하는 경우:

.wrapper (위치: 상대; /*상위 상자를 상대 위치로 설정하여 나중에 상자 안에 절대 위치를 지정할 수 있도록*/) .box ( 너비: 400px; 위치: 절대; 왼쪽: 50%; 여백-왼쪽: - 200px; / *폭의 절반만큼 블록을 왼쪽으로 이동*/ )

1.4. 블록에 너비가 설정되지 않은 경우 상위 래퍼 블록을 사용하여 가운데에 배치할 수 있습니다.

.wrapper (text-align: center; /*블록 내용 가운데 맞춤*/) 블록 사이 들여쓰기*/ )

2. 수직 정렬

2.1. 예를 들어 버튼과 메뉴 항목에 대해 텍스트가 한 줄을 차지하는 경우:

.버튼(높이: 50px; 줄 높이: 50px; )

2.2. 상위 블록 내에서 블록을 수직으로 정렬하려면:

.wrapper (위치: 상대;) .box ( 높이: 100px; 위치: 절대; 상단: 50%; 여백: -50px 0 0 0; )

2.3. 테이블 유형별 수직 정렬:

.wrapper ( 디스플레이: 테이블; 너비: 100%; ) .box ( 디스플레이: 테이블-셀; 높이: 100px; 텍스트-정렬: 중앙; 수직-정렬: 중간; )

2.4. 상자에 너비와 높이가 설정되어 있고 부모 상자의 중앙에 있어야 하는 경우:

.wrapper ( 위치: 상대; ) .box ( 높이: 100px; 너비: 100px; 위치: 절대; 상단: 0; 오른쪽: 0; 하단: 0; 왼쪽: 0; 여백: 자동; 오버플로: 자동; /*to 내용이 퍼지지 않았습니다 */ )

2.5. CSS3 변환을 사용하여 페이지/블록 중앙에 절대 위치 지정:

요소에 차원이 있는 경우

div ( 너비: 300px; /*블록 너비 설정*/ 높이:100px; /*블록 높이 설정*/ transform: translate(-50%, -50%); 위치: 절대; 상단: 50%; 왼쪽: 50% ; )

요소에 차원이 없고 비어 있지 않은 경우

여기에 일부 텍스트

h1 ( 여백: 0; 변환: 번역(-50%, -50%); 위치: 절대; 상단: 50%; 왼쪽: 50%; )

매우 자주 작업은 페이지/화면의 중앙에 블록을 정렬하는 것이며, 자바 스크립트 없이도 하드 크기나 음수 들여쓰기를 설정하지 않고 블록이 크기를 초과하는 경우 스크롤 막대가 상위 항목에서 작동하도록 하는 것입니다. 블록을 화면 중앙에 정렬하는 방법에 대한 단조로운 예가 그물에 꽤 많이 있습니다. 일반적으로 대부분은 동일한 원칙을 기반으로 합니다.

다음은 문제를 해결하는 주요 방법, 장단점입니다. 예제의 본질을 이해하려면 표시된 링크의 예제에서 결과 창의 높이/너비를 줄이는 것이 좋습니다.

옵션 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 ( 디스플레이: 인라인 블록; img ( 디스플레이: 블록; 테두리: 없음; ) )

이 예제에 스크롤을 추가하려면 구조에 요소를 하나 더 추가해야 합니다.
예: jsfiddle.net/serdidg/fk5nqh52/3 .

옵션 4. 의사 요소.

이 옵션은 이전 방법에 나열된 모든 문제가 없으며 원래 작업도 해결합니다. 가지고 있는 것이 포인트 부모의스타일 설정 의사 요소이전, 즉 100% 높이, 중앙 정렬 및 인라인 상자 모델. 와 같다 차단하다인라인 블록의 모델, 중앙 정렬을 넣습니다. 에게 차단하다아래에 떨어지지 않았다 의사 요소첫 번째 치수가 다음보다 클 때 부모의, 지정 부모의 white-space: nowrap 및 font-size: 0 이후 y 차단하다다음과 같은 스타일을 취소하십시오 - 공백: normal. 에 이 예 font-size: 0은 결과 사이의 공백을 제거하기 위해 필요합니다. 부모의그리고 차단하다코드 서식과 관련하여. 간격은 다른 방법으로 제거할 수 있지만 단순히 허용하지 않는 것이 가장 좋습니다.

상위( 너비: 100%; 높이: 100%; 위치: 절대; 상단: 0; 왼쪽: 0; 오버플로우: 자동; 공백: nowrap; 텍스트 정렬: 중앙; 글꼴 크기: 0; &:before( 높이: 100%; 표시: 인라인 블록; 수직 정렬: 중간; 내용: ""; ) ) .block ( 표시: 인라인 블록; 공백: 일반; 수직 정렬: 중간; 텍스트 정렬: 왼쪽 ; img ( 표시: 차단; 테두리: 없음; ) )

또는 부모가 전체 페이지가 아닌 창의 높이와 너비만 차지하도록 하려면 다음을 수행합니다.

상위( 위치: 고정; 상단: 0; 오른쪽: 0; 하단: 0; 왼쪽: 0; 오버플로: 자동; 공백: nowrap; 텍스트 정렬: 중앙; 글꼴 크기: 0; &:before( 높이: 100%; 표시: 인라인 블록; 수직 정렬: 중간; 내용: ""; ) ) .block ( 표시: 인라인 블록; 공백: 일반; 수직 정렬: 중간; 텍스트 정렬: 왼쪽; img ( 표시: 차단, 테두리: 없음; ) )

옵션 5. Flexbox.

가장 간단하고 우아한 방법 중 하나는 flexbox를 사용하는 것입니다. 불필요한 신체 움직임을 필요로 하지 않으며, 일어나고 있는 일의 본질을 아주 명확하게 설명하고, 높은 유연성을 가지고 있습니다. 선택할 때 기억해야 할 유일한 것은 이 방법- 버전 10부터 IE 지원. caniuse.com/#feat=플렉스박스

부모( 너비: 100%, 높이: 100%, 위치: 고정, 상단: 0, 왼쪽: 0, 디스플레이: flex, align-items: center, align-content: center, justify-content: center, overflow: auto, ) .block ( 배경: #60a839; img ( 디스플레이: 블록; 테두리: 없음; ) )

옵션 6. 변환.

구조에 제한이 있고 조작할 방법이 없는 경우에 적합 부모 요소, 블록을 어떻게든 정렬해야 합니다. translate() css 함수가 도움이 될 것입니다. 50% 값으로 절대 위치는 상자의 왼쪽 상단 모서리를 정확히 중앙에 배치하고 음수 변환 값은 자체 치수에 대해 상자를 이동합니다. 가장자리가 흐릿하거나 글꼴 스타일의 형태로 부정적인 효과가 나타날 수 있습니다. 또한 유사한 방법으로 자바스크립트 "a. 때로는 너비의 50% 손실을 보상하기 위해 CSS 사용왼쪽 속성은 블록에 대해 설정된 규칙에 의해 도움을 받을 수 있습니다. 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 .
큰 그림의 예:

블라드 메르제비치

테이블 셀의 내용을 수평 및 수직으로 동시에 정렬할 수 있기 때문에 요소 간의 상대적 위치를 제어할 수 있는 가능성이 확장됩니다. 표를 사용하면 이미지, 텍스트, 양식 필드 및 기타 요소의 정렬을 서로에 대해 그리고 웹 페이지 전체에 대해 상대적으로 설정할 수 있습니다. 일반적으로 정렬은 서로 다른 요소 간의 시각적 연결을 설정하고 그룹화하는 데 주로 필요합니다.

수직 센터링

방문자에게 사이트의 초점과 제목을 표시하는 한 가지 방법은 스플래시 페이지를 사용하는 것입니다. 이것은 일반적으로 사이트의 주요 아이디어를 표현하는 플래시 소개 또는 그림이있는 첫 번째 페이지입니다. 이 이미지는 사이트의 다른 섹션에 대한 링크이기도 합니다. 이 사진은 모니터의 해상도와 상관없이 브라우저 창 중앙에 위치해야 합니다. 이를 위해 너비와 높이가 100%인 테이블을 사용할 수 있습니다(예제 1).

예 1: 그림 중앙에 맞추기

조정

이 예에서 수평 정렬은 align="center" 태그 매개변수를 사용하여 설정됩니다. , 이 위치가 기본적으로 설정되어 있으므로 셀 내용을 세로로 가운데에 맞출 필요가 없습니다.

테이블 높이를 100%로 설정하려면, 코드는 더 이상 유효하지 않습니다.

웹 페이지의 사용 가능한 전체 영역에 대해 너비와 높이를 사용하면 크기에 관계없이 테이블의 내용이 브라우저 창 중앙에 엄격하게 정렬됩니다.

수평 정렬

align(가로 정렬)과 valign( 수직 정렬) 태그 , 서로에 대해 요소의 여러 유형의 위치를 설정할 수 있습니다. 무화과에. 1은 요소를 수평으로 정렬하는 방법을 보여줍니다.

아래 그림에 따라 텍스트 정렬의 몇 가지 예를 살펴보겠습니다.

상단 정렬

태그에 대해 셀 내용을 맨 위에 정렬하도록 지정하려면 valign 속성을 top 값으로 설정해야 합니다(예제 2).

예 2: valign 사용

조정

1열

2열

이 예에서는 태그 매개변수를 사용하여 셀 특성을 제어합니다. , 하지만 스타일을 통해 변경하는 것이 더 편리합니다. 특히 셀 정렬은 vertical-align 및 text-align 속성으로 지정됩니다(예제 3).

예 3: 정렬 스타일 적용

조정

1열

2열

세로 정렬 및 패딩 속성이 동시에 두 셀에 적용되기 때문에 이 예제에서는 코드를 줄이기 위해 선택기 그룹화를 사용합니다.

하단 정렬도 같은 방식으로 수행되지만 상단 대신 하단이 사용됩니다.

중앙 정렬

기본적으로 셀의 내용은 세로의 중앙에 정렬되므로 열 높이가 다른 경우 정렬을 위쪽으로 설정해야 합니다. 예를 들어 그림 1과 같이 수식을 배치할 때 원래 정렬 방법을 그대로 두어야 하는 경우가 있습니다. 2.

이 경우 수식은 브라우저 창 중앙에 정확히 위치하며 해당 번호는 오른쪽 가장자리에 있습니다. 이러한 요소 배열을 위해서는 세 개의 셀이 있는 테이블이 필요합니다. 극단 셀은 같은 크기를 가져야 하며 가운데 셀에서는 중앙에서 정렬이 수행되고 오른쪽 셀에서는 오른쪽 가장자리(예제 4)에서 수행됩니다. 수식이 중앙에 오도록 하려면 이 수의 셀이 필요합니다.

예 4: 수식 정렬

조정

(18.6)

이 예에서 테이블의 첫 번째 셀은 비어 있으며 들여쓰기를 만드는 역할만 하며 스타일을 사용하여 설정할 수도 있습니다.