div의 수평 정렬입니다. 요소의 수평 및 수직 정렬

레이아웃을 해보신 많은 분들이 요소를 세로로 정렬해야 하는 필요성을 알게 되었고 요소를 중앙에 정렬할 때 어떤 어려움이 발생하는지 알고 있을 것입니다.

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

다음 접근 방식을 비교해 보겠습니다. 다음과 정렬:

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

예를 들어 다음 예를 고려하십시오.

두 개의 div가 있으며 하나는 다른 하나에 중첩됩니다. 그들에게 해당 클래스를 제공합시다 - 외부 및 내부.

문제는 내부 요소를 외부 요소의 중심에 맞추는 것입니다.

우선, 실외기 및 실내기의 치수가 다음과 같은 경우를 고려하십시오. 모두 다 아는... display: inline-block을 내부 요소에 추가하고 text-align: center 및 vertical-align: middle을 외부 요소에 추가합시다.

정렬은 인라인 또는 인라인 블록 표시 모드가 있는 요소에만 적용됩니다.

테두리를 보기 위해 블록 크기와 배경색을 지정해 보겠습니다.

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

왜 그런 일이 일어났습니까?요점은 vertical-align 속성이 정렬에 영향을 미친다는 것입니다. 내용이 아닌 요소 자체(테이블 셀에 적용되는 경우 제외). 따라서 이 속성을 외부 요소에 적용해도 아무 효과가 없습니다. 게다가 이 속성을 내부 요소에 적용하면 인라인 블록이 인접한 블록에 대해 수직으로 정렬되고 우리의 경우에는 하나의 인라인 블록이 있기 때문에 아무 일도 하지 않습니다.

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

테이블과 정렬

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

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 속성을 사용하여 외부 블록의 높이와 동일하게 설정할 수 있습니다. 내부 블록의 내용이 두 번째 줄로 줄바꿈되지 않아야 하므로 white-space: nowrap 및 overflow: hidden 규칙도 추가하는 것이 좋습니다.

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

또한 이 기술을 사용하여 내부 블록의 줄 높이 값을 재정의하고 display: inline-block 및 vertical-align: middle 규칙을 추가하여 여러 줄 텍스트를 정렬할 수 있습니다.

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

마이너스 이 방법실외기의 높이를 알아야 한다는 것입니다.

늘이기 정렬

이 방법은 실외기의 높이를 알 수 없으나 실내기의 높이를 알고 있는 경우에 사용할 수 있습니다.

이를 위해서는 다음이 필요합니다.

외부 블록의 상대 위치를 설정하고 내부 블록을 절대 위치로 설정합니다.
규칙을 top: 0 및 bottom: 0을 내부 블록에 추가하면 외부 블록의 전체 높이까지 늘어납니다.
내부 블록의 수직 패딩에 대해 자동으로 설정합니다.

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

이 기술의 요점은 늘이고 절대 위치에 있는 상자의 높이를 지정하면 브라우저가 자동으로 설정된 경우 동일한 비율로 수직 여백을 계산하도록 한다는 것입니다.

음수 margin-top으로 정렬

이 방법은 널리 알려졌고 매우 자주 사용됩니다. 앞의 것과 같이 외부 블록의 높이를 알 수 없으나 내부 블록의 높이를 알고 있는 경우에 적용된다.

외부 블록의 상대 위치 지정과 내부 블록의 절대 위치를 설정해야 합니다. 그런 다음 내부 상자를 외부 상자 상단 높이의 절반(50%) 아래로 약간 이동하고 자체 높이의 절반으로 올려야 합니다. margin-top: -H inner / 2.

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

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

변환과 정렬

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

외부(위치: 상대;) .내부(위치: 절대, 상단: 50%, 변환: translateY(-50%);)
http://jsfiddle.net/c1bgfffq/9/

이전 방법에서 백분율을 설정할 수 없는 이유는 무엇입니까? margin 속성의 백분율 값은 부모를 기준으로 계산되기 때문에 50%는 외부 상자 높이의 절반이 되며 내부 상자를 자체 높이의 절반으로 올려야 했습니다. 이를 위해 transform 속성이 맞습니다.

이 방법의 단점은 내부 블록에 절대 위치 지정이 있는 경우 적용할 수 없다는 것입니다.

Flexbox와 정렬

수직으로 정렬하는 가장 현대적인 방법은 Flexible Box Layout(Flexbox로 널리 알려져 있음)을 사용하는 것입니다. 이 모듈을 사용하면 페이지에서 요소의 위치를 유연하게 제어하여 원하는 대로 배치할 수 있습니다. Flexbox의 중심 정렬은 매우 간단한 작업입니다.

외부 상자는 display: flex로 설정해야 하고 내부 상자는 margin: auto로 설정해야 합니다. 그리고 그게 다야! 아름답죠?

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

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

어떤 방법을 선택할 것인가?

문제 진술에서 진행해야합니다.

텍스트의 수직 정렬을 위해서는 수직 패딩이나 line-height 속성을 사용하는 것이 좋습니다.
아이콘과 같이 높이가 알려진 절대 위치 요소의 경우 음수 margin-top 속성이 이상적입니다.
이상 어려운 경우블록의 높이를 알 수 없는 경우 의사 요소 또는 변형 속성을 사용해야 합니다.
글쎄, 운이 좋아서 IE 브라우저의 이전 버전을 지원할 필요가 없다면 물론 Flexbox를 사용하는 것이 좋습니다.

태그: 태그 추가

사이트 페이지의 레이아웃 및 중앙 정렬은 창의적인 작업이며 종종 초보자에게 어려움을 야기합니다. 그럼 어떻게 하는지 봅시다. 다음과 같은 구조의 페이지를 만들고 싶다고 가정해 봅시다.

페이지는 헤더, 메뉴, 콘텐츠 및 바닥글의 4개 블록으로 구성됩니다. 페이지의 중앙 정렬을 위해 다음 네 개의 블록을 하나의 메인 블록(메인)에 넣습니다.

사이트 헤더

콘텐츠

사이트 하단

이 구조를 예로 사용하여 몇 가지 옵션을 고려할 것입니다.

고무 사이트의 레이아웃 및 센터링

고무 사이트를 구성할 때 사용되는 주요 측정 단위는 -%입니다. 사이트는 너비가 늘어나고 모든 여유 공간을 차지해야 하기 때문입니다.

따라서 "머리글" 및 "바닥글" 블록의 너비는 화면 너비의 100%가 됩니다. "menu" 블록의 너비를 30%로 하고 "content" 블록은 "menu" 블록 옆에 위치해야 합니다. 너비가 "메뉴" 블록의 너비와 같은 왼쪽 여백(왼쪽 여백)이 있어야 합니다. 서른%.

"메뉴" 블록과 "콘텐츠" 블록을 나란히 만들려면 "메뉴" 블록을 띄우고 왼쪽으로 눌러봅시다. 블록의 배경색도 설정합니다. 이제 스타일시트(style.css 페이지에서)에 모든 것을 기록해 보겠습니다.

#header (background: # 3e4982; width: 100%; height: 110px; text-align: center; color: #FFFFFF; font-size: 24px; padding-top: 40px;) #menu (background: # 6173cb; float : 왼쪽; 너비: 30%; 높이: 300px; 텍스트 정렬: 가운데; 색상: #FFFFFF; 글꼴 크기: 18픽셀; 패딩 상단: 10픽셀;) #내용(배경: #ffffff; 여백-왼쪽: 30% ; 높이: 300px; 텍스트 정렬: 중앙;) #바닥글(배경: # 3e4982; 지우기: 둘 다; 너비: 100%; 높이: 50px; 텍스트 정렬: 중앙; 색상: #FFFFFF; 글꼴 크기: 14px; 패딩 상단: 10px;)

블록의 높이는 결과가 보이도록 조건부로 설정되었습니다. 브라우저에서 당사 페이지를 살펴보십시오.

브라우저 창의 크기를 조정하면 모든 블록의 너비가 변경됩니다. 이것이 항상 편리한 것은 아닙니다. 메뉴 블록이 늘어나면 빈 공간이 나타납니다. 따라서 "메뉴" 블록의 너비가 고정되는 경우가 더 많으니 그렇게 합시다. 이렇게 하려면 스타일 시트에서 해당 속성의 값을 바꿉니다.

... #menu (배경: # 6173cb; float: left; width: 200px; height: 300px;) #content (background: #ffffff; margin-left: 200px; height: 300px;) ...

이제 페이지가 더 자연스럽게 늘어납니다. 유동적 레이아웃에서는 페이지가 화면의 전체 너비를 차지하므로 페이지 중앙에 정렬할 필요가 없습니다.

그러나 원하는 경우 페이지에서 화면의 왼쪽과 오른쪽에 동일한 들여쓰기를 갖도록 만들 수 있습니다. 이렇게 하려면 다른 모든 블록의 컨테이너인 "main" 블록에 스타일을 추가합니다.

이제 우리 페이지는 다음과 같습니다.

사이트 레이아웃 및 센터링, 고정 너비

이 경우 블록에 대해 고정 크기를 설정해야 합니다.

#main (너비: 800px;) #header (background: # 3e4982; width: 800px; height: 150px; text-align: center; color: #FFFFFF; font-size: 24px; padding-top: 40px;) #menu (background: # 6173cb; float: left; width: 200px; height: 300px; text-align: center; color: #FFFFFF; font-size: 18px; padding-top: 10px;) #content (background: #ffffff; margin-left: 200px; height: 300px; text-align: center;) #footer (background: # 3e4982; clear: both; width: 800px; height: 50px; text-align: center; color: #FFFFFF; font- 크기: 14px; 패딩 상단: 10px;)

이제 페이지가 화면 왼쪽 가장자리에 고정되었습니다.

이 경우 사이트 페이지 중앙 정렬은 다음과 같이 할 수 있습니다. 페이지에는 너비와 일부 여백도 설정할 수 있는 "본문" 태그가 있음을 기억하십시오.

이렇게 해보자: "body" 태그를 800픽셀 너비(예: "main" 블록)로 설정하고 padding-left를 50%로 설정합니다. 그러면 "메인" 블록의 모든 내용이 화면 오른쪽에 표시됩니다(즉, 가운데에서 오른쪽으로).

"main" 블록이 화면 중앙에 오려면 그 중간이 "body" 태그의 중간과 일치해야 합니다. 저것들. "main" 블록을 크기의 절반만큼 왼쪽으로 이동해야 합니다. "main" 블록의 너비는 800픽셀이므로 "margin-left: -400px" 속성을 설정해야 합니다. 예, 이 속성은 음수 값을 가질 수 있습니다. 그러면 왼쪽 여백이 줄어듭니다(즉, 왼쪽으로 이동). 그리고 이것이 바로 우리에게 필요한 것입니다.

이제 스타일시트는 다음과 같습니다.

body (width: 800px; padding-left: 50%;) #main (width: 800px; margin-left: -400px;) #header (background: # 3e4982; width: 800px; height: 150px; text-align: center ; 색상: #FFFFFF; 글꼴 크기: 24px; 패딩 상단: 40px;) #menu (배경: # 6173cb; float: left; width: 200px; height: 300px; text-align: center; color: #FFFFFF; font-size: 18px; padding-top: 10px;) #content (background: #ffffff; margin-left: 200px; height: 300px; text-align: center;) #footer (background: # 3e4982; clear: both; 너비: 800픽셀, 높이: 50픽셀, 텍스트 정렬: 가운데, 색상: #FFFFFF, 글꼴 크기: 14픽셀, 패딩 상단: 10픽셀;)

그리고 브라우저의 페이지는 정확히 중간에 있습니다.

우리는 사이트 페이지의 중앙을 정렬하기 위해 두 가지 옵션을 고려했지만 실제로는 도그마가 아닙니다. 실험하고 고유한 버전을 만들 수 있으며 다른 브라우저에서 테스트하기만 하면 됩니다. 불행히도 FireFox 또는 Opera에서 잘 렌더링되는 것이 IE에서는 완전히 이해되지 않을 수 있으며 그 반대의 경우도 마찬가지입니다. 그리고 이것은 기억해야 합니다.

창조적 인 탐구에 행운을 빕니다!

페이지를 구성할 때 종종 중앙 CSS- 방법: 예를 들어 메인 블록을 중앙에 배치합니다. 이 문제를 해결하기 위한 몇 가지 옵션이 있으며, 각 옵션은 조만간 모든 레이아웃 디자이너가 사용해야 합니다.

중앙 정렬 텍스트

종종 장식용으로 텍스트 정렬을 중앙으로 설정해야 하는 경우가 많습니다. 이 경우 CSS를 사용하면 조판 시간을 줄일 수 있습니다. 이전에는 HTML 속성을 사용하여 이 작업을 수행했지만 이제는 표준에서 스타일 시트를 사용한 텍스트 정렬을 요구합니다. 여백을 변경해야 하는 블록과 달리 CSS 정렬중심 텍스트는 한 줄로 수행됩니다.

텍스트 정렬: 가운데;

이 속성은 상속되어 부모로부터 모든 자손에게 전달됩니다. 텍스트뿐만 아니라 다른 요소에도 영향을 미칩니다. 이렇게 하려면 인라인(예: span) 또는 inline-block(display: block 속성이 설정된 모든 블록)이어야 합니다. 후자의 옵션을 사용하면 요소의 너비와 높이를 변경하고 들여쓰기를 보다 유연하게 조정할 수도 있습니다.

종종 페이지 정렬은 태그 자체에 기인합니다. align 속성이 W3C에서 더 이상 사용되지 않기 때문에 이렇게 하면 코드가 즉시 무효화됩니다. 페이지에서 사용하는 것은 권장하지 않습니다.

블록을 중앙에 정렬

div를 중앙에 설정해야 하는 경우 CSS는 다음을 제공할 수 있습니다. 편리한 방법: 패딩 여백을 사용합니다. 블록 요소와 인라인 블록 요소 모두에 대해 들여쓰기를 설정할 수 있습니다. 속성 값은 0(세로 들여쓰기) 및 auto(자동 가로 들여쓰기) 값을 취해야 합니다.

여백: 0 자동;

이제 이 특정 옵션이 절대적으로 유효한 것으로 인식됩니다. 외부 들여쓰기를 사용하면 이미지의 중앙 정렬을 설정할 수도 있습니다. 이를 통해 페이지에서 요소의 위치와 관련된 많은 문제를 해결할 수 있습니다.

블록을 왼쪽 또는 오른쪽으로 정렬

때로는 CSS 정렬이 중앙에 필요하지 않지만 두 개의 블록을 나란히 놓아야 합니다. 하나는 왼쪽에, 다른 하나는 오른쪽에 배치해야 합니다. 이를 위해 왼쪽, 오른쪽 또는 없음의 세 가지 값 중 하나를 사용할 수 있는 float 속성이 있습니다. 나란히 배치해야 하는 두 개의 블록이 있다고 가정해 보겠습니다. 그러면 코드는 다음과 같을 것입니다.

.left (부동 소수점: 왼쪽;)
.right (float: right)

처음 두 블록(예: 바닥글) 아래에 위치해야 하는 세 번째 블록도 있는 경우 clear 속성을 등록해야 합니다.

.left (부동 소수점: 왼쪽;)
.right (float: right)
바닥글(클리어: 둘 다)

사실 왼쪽과 오른쪽 클래스가 있는 블록은 일반적인 흐름에서 벗어납니다. 즉, 다른 모든 요소는 정렬된 요소의 존재 자체를 무시합니다. clear: both 속성은 바닥글이나 다른 블록이 흐름을 벗어난 요소를 볼 수 있도록 하고 왼쪽과 오른쪽 모두에서 부동 소수점을 허용하지 않습니다. 따라서 이 예에서는 바닥글이 아래로 이동합니다.

수직 정렬

CSS 방식으로 중앙 정렬을 설정하는 것만으로는 부족할 때가 있고, 자식 블록의 세로 위치도 변경해야 하는 경우가 있습니다. 모든 인라인 또는 인라인 블록 요소는 위쪽 또는 아래쪽 가장자리, 상위 요소 중간 또는 아무 곳에나 고정할 수 있습니다. 대부분의 경우 중앙에 블록을 정렬해야 하며 이를 위해 vertical-align 속성이 사용됩니다. 두 개의 블록이 있다고 가정해 보겠습니다. 하나는 다른 블록 안에 중첩되어 있습니다. 이 경우 내부 블록은 인라인 블록 요소(디스플레이: 인라인 블록)입니다. 자식 블록을 수직으로 정렬해야 합니다.

상단 정렬 - .child (수직 정렬: 상단);
중앙 정렬 - .child (수직 정렬: 가운데);
하단 정렬 - .child (수직 정렬: 하단);

에 블록 요소 text-align이나 vertical-align은 아무 효과가 없습니다.

정렬된 블록에 발생할 수 있는 문제

때때로 CSS 방식으로 div를 중앙에 정렬하면 작은 문제가 발생할 수 있습니다. 예를 들어 float:를 사용할 때 .first, .second 및 .third의 세 블록이 있다고 가정해 보겠습니다. 두 번째 및 세 번째 블록은 첫 번째 블록에 있습니다. 클래스가 두 번째인 요소는 왼쪽으로 정렬되고 마지막 블록은 오른쪽으로 정렬됩니다. 정렬 후 둘 다 스트림에서 떨어졌습니다. 상위 요소에 지정된 높이(예: 30em)가 없으면 하위 블록의 높이를 따라 늘어나는 것을 멈춥니다. 이 오류를 방지하려면 .second 및 .third를 보는 특수 블록인 "스페이서"를 사용하십시오. CSS 코드:

.second (부동 소수점: 왼쪽)
.3번째 (부동 소수점: 오른쪽)
.clearfix (높이: 0; 지우기: 둘 다;)

: after pseudo-class가 자주 사용되며, 이를 통해 의사 레이아웃을 생성하여 블록을 제자리에 다시 배치할 수도 있습니다(예제에서 컨테이너 클래스가 있는 div는 .first 내부에 있고 .left 및 .right 포함).

.left (부동 소수점: 왼쪽)
.right (float: right)
.container: 후(내용: ""; 표시: 테이블; 지우기: 둘 다;)

위의 옵션이 가장 일반적이지만 몇 가지 변형이 있습니다. 실험을 통해 의사 레이아웃을 만드는 가장 쉽고 편리한 방법을 항상 찾을 수 있습니다.

레이아웃 디자이너가 종종 직면하는 또 다른 문제는 인라인 블록 요소의 정렬입니다. 각각의 뒤에 공백이 자동으로 추가됩니다. 음수 마진으로 설정된 margin 속성은 이에 대처하는 데 도움이 됩니다. 훨씬 덜 자주 사용되는 다른 방법이 있습니다. 예를 들어 0으로 설정 이 경우에는 부모 요소의 속성에 font-size: 0이 기록됩니다. 블록 내부에 텍스트가 있으면 인라인 블록 요소의 속성에 필요한 글꼴 크기가 이미 반환됩니다. 예를 들어 font-size: 1em입니다. 이 방법이 항상 편리한 것은 아니므로 외부 들여쓰기 옵션이 훨씬 더 자주 사용됩니다.

블록을 정렬하면 아름답고 기능적인 페이지를 만들 수 있습니다. 이것은 일반 레이아웃의 레이아웃, 온라인 상점의 상품 위치 및 명함 사이트의 사진입니다.

여보세요! 우리는 계속해서 HTML 언어의 기초를 마스터합니다. 텍스트를 중앙, 너비 또는 가장자리에 정렬하기 위해 작성해야 하는 내용을 살펴보겠습니다.

비즈니스로 내려가서 HTML 텍스트를 3개의 중앙으로 만드는 방법을 살펴보겠습니다. 다른 방법들... 마지막 두 개는 스타일 시트와 직접 관련이 있습니다. 사이트 페이지에 연결하고 모양을 설정하는 CSS 파일일 수 있습니다.

방법 1 - HTML로 직접 작업

사실 모든 것이 아주 간단합니다. 아래 예를 참조하십시오.

단락의 중앙 정렬.

다른 방식으로 텍스트 조각을 이동해야 하는 경우 "center" 매개변수 대신 다음 값을 작성하십시오.

justify - 페이지 너비에 대한 텍스트 정렬.
오른쪽 - 오른쪽 정렬;
왼쪽 - 왼쪽.

비유하자면 헤더(h1, h2), 컨테이너(div)에 있는 내용을 이동할 수 있습니다.

방법 2 및 3 - 스타일 사용

위에 제시된 디자인은 약간 변형될 수 있습니다. 효과는 동일할 것입니다. 이렇게 하려면 아래 코드를 등록해야 합니다.

텍스트 블록.

따라서 코드는 HTML에 직접 작성되어 텍스트 내용의 중앙에 배치됩니다.

결과를 얻을 수 있는 다른 방법도 있습니다. 몇 가지 단계를 수행해야 합니다.

1단계. 기본 코드에서 다음을 작성합니다.
텍스트 자료입니다.

2단계. 포함된 CSS 파일에 다음 코드를 입력합니다.

Rovno(텍스트 정렬: 가운데;)

"rovno"라는 단어는 클래스의 이름일 뿐이며 다르게 부를 수 있습니다. 이것은 프로그래머의 재량에 맡깁니다.

HTML에서 유추하여 페이지의 오른쪽 또는 왼쪽에 텍스트 중심, 너비 및 정렬을 쉽게 만들 수 있습니다. 보시다시피, 목표를 달성하기 위한 하나의 옵션이 없습니다.

몇 가지 질문:

정보 제공을 위한 비상업적 프로젝트를 수행하고 있습니까?
사이트가 잘 홍보되기를 원하십니까? 검색 엔진?
온라인으로 수입을 받고 싶습니까?

모든 대답이 긍정적이라면 웹사이트 개발에 대한 통합 접근 방식을 살펴보십시오. 정보가 다음과 같은 경우에 특히 유용합니다. CMS 워드프레스.

귀하의 사이트는 인터넷에서 수동적 또는 능동적인 수입을 창출할 수 있는 많은 옵션 중 하나일 뿐입니다. 내 블로그는 웹상의 재정적 기회에 관한 것입니다.

원격으로 일할 때 주요 또는 추가 수입을 창출하는 트래픽 차익 거래, 카피라이팅 및 기타 활동 분야에서 일한 적이 있습니까? 지금 바로 제 블로그 페이지에서 이에 대해 더 자세히 알아볼 수 있습니다.

앞으로 나는 더 많은 실제를 게시 할 것입니다 유용한 정보... 연락을 유지하다. 원하는 경우 이메일로 Workip 업데이트를 구독할 수 있습니다. 가입 양식은 아래와 같습니다.

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

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

이 방법은 모든 브라우저에서 잘 작동합니다.

CSS

예시

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

페이지에서 DIV 요소의 반응형 센터링

여기를 위해 div 정렬 CSS를 사용하여 중앙에 배치된 div 요소의 너비를 반응형으로 만들어 창 크기의 변화에 반응하도록 합니다. 이 방법은 모든 브라우저에서 작동합니다.

CSS