.

정렬 속성은 매우 다양하며 본문 텍스트뿐만 아니라 다음과 같은 제목에도 적용할 수 있습니다.

. 예제 1은 이러한 경우 정렬을 설정하는 방법을 보여줍니다.

예제 1: 텍스트 정렬

사자를 잡는 방법?

열거 방법

우리는 사막을 여러 기본 섹션으로 나눕니다. 그 크기는 사자의 전체 치수와 일치하지만 새장의 크기보다 작습니다. 다음으로 간단한 열거를 통해 사자가 있는 지역을 결정하여 자동으로 사자를 포획합니다.

이분법

우리는 사막을 두 부분으로 나눕니다. 한 부분에는 사자가 있고 다른 부분에는 사자가 없습니다. 사자가있는 반쪽을 가져다가 다시 반으로 나눕니다. 그래서 우리는 사자가 잡힐 때까지 반복합니다.

예제의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 텍스트를 좌우로 정렬

안에 이 예제목은 브라우저 창의 중앙에, 선택한 단락은 오른쪽에, 본문 텍스트는 왼쪽에 정렬됩니다.

텍스트 정렬, 들여쓰기를 정의하는 HTML 태그

타이포그래피에 사용되는 정렬된 텍스트

아래 예는 정렬 방법을 보여줍니다. 텍스트 폭페이지:

정렬="왼쪽"	정렬="오른쪽"
	매일 서비스 부문에 고용된 근로자의 수와 정보 보급이 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.
정렬="정렬"	정렬="가운데"
매일 서비스 부문에 고용된 근로자의 수와 정보 보급이 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.	매일 서비스 부문에 고용된 근로자의 수와 정보 보급이 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.

justify 값은 균일성을 제공합니다. 텍스트 좌우 정렬, 그건 너비. 이 방법은 인쇄에서 널리 사용됩니다.

HTML의 텍스트를 중앙 정렬 및 정렬

HTML의 텍스트를 가운데 정렬, 텍스트를 오른쪽 정렬:

결과:

속성 및 값

• align="왼쪽" - 정의 왼쪽 텍스트 정렬(기본).
• 정렬="중앙" - 텍스트를 중앙에 정렬.
• 정렬="오른쪽" 텍스트를 오른쪽으로 정렬.

정렬 | HTML 텍스트 들여쓰기

페이지 왼쪽의 HTML 텍스트 및 들여쓰기

생산하자 텍스트 들여쓰기두 가지 방법으로 왼쪽에:

결과:

새 창에서 봅니다.

안녕하세요! 계속해서 기초를 배우고 HTML 언어. 텍스트를 가운데, 너비 또는 가장자리에 맞추기 위해 무엇을 작성해야 하는지 살펴보겠습니다.

사업에 착수하여 HTML에서 텍스트 중심을 3으로 만드는 방법을 살펴 보겠습니다. 다른 방법들. 마지막 두 개는 스타일 시트와 직접 관련됩니다. 사이트의 페이지에 연결되고 모양을 설정하는 CSS 파일이 될 수 있습니다.

방법 1 - HTML로 직접 작업

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

단락을 중앙에 맞춥니다.

텍스트 조각을 다른 방식으로 이동하려면 "center" 매개변수 대신 다음 값을 입력하십시오.

• justify - 텍스트를 페이지 너비에 맞춥니다.
• 오른쪽 - 오른쪽 가장자리에;
• 왼쪽 - 왼쪽.

비유하자면 헤더(h1, h2), 컨테이너(div)에 있는 콘텐츠를 이동할 수 있습니다.

방법 2 및 3 - 스타일 사용

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

텍스트 블록.

이 형식에서 코드는 HTML에 직접 작성되어 텍스트 콘텐츠를 중앙에 배치합니다.

결과를 얻는 또 다른 대안이 있습니다. 몇 가지 작업을 수행해야 합니다.

1단계. 메인 코드에 작성

텍스트 자료.

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

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

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

유사하게 HTML에서는 텍스트를 쉽게 중앙에 배치하고, 양쪽 정렬하고, 페이지의 오른쪽이나 왼쪽에 정렬할 수 있습니다. 보시다시피 목표를 달성하기 위한 옵션은 하나가 아닙니다.

몇 가지 질문:

• 정보 제공용 비상업적 프로젝트를 수행하고 있습니까?
• 귀하의 사이트가 잘 작동하기를 원하십니까? 검색 엔진?
• 온라인으로 수입을 얻고 싶습니까?

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

귀하의 사이트는 인터넷에서 수동적 또는 능동적 소득을 창출하기 위한 많은 옵션 중 하나일 뿐이라는 점에 유의하고 싶습니다. 내 블로그는 인터넷상의 재정적 기회에 관한 것입니다.

교통 차익 거래, 카피라이팅 및 원격 협력으로 주요 또는 추가 수입을 가져오는 기타 활동 분야에서 일한 적이 있습니까? 내 블로그 페이지에서 지금 이것과 훨씬 더 많은 것을 찾을 수 있습니다.

앞서 나는 여전히 조금 현실적이지 않은 출판 할 것입니다 유용한 정보. 연락을 유지하다. 원하는 경우 전자 메일로 Workip 업데이트를 구독할 수 있습니다. 구독 양식은 아래에 있습니다.

페이지를 배치할 때 정렬해야 하는 경우가 많습니다. CSS 센터-way: 예를 들어 본체를 중앙에 배치합니다. 이 문제를 해결하기 위한 몇 가지 옵션이 있으며, 각 옵션은 레이아웃 디자이너가 조만간 사용해야 합니다.

가운데 텍스트 정렬

종종 장식 목적으로 텍스트 정렬을 가운데로 설정하고 싶을 때가 있습니다. 이 경우 CSS를 사용하면 레이아웃 시간을 줄일 수 있습니다. 이전에는 HTML 속성을 사용하여 이 작업을 수행했지만 이제 표준에서는 스타일 시트를 사용하여 텍스트를 정렬해야 합니다. 여백을 변경해야 하는 블록과 달리 CSS 정렬가운데 맞춤 텍스트는 한 줄로 수행됩니다.

• 텍스트 정렬:가운데;

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

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

블록을 중앙에 정렬

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

• 여백:0 자동;

이제 이 옵션은 절대적으로 유효한 것으로 인식됩니다. 여백을 사용하면 이미지 정렬을 가운데로 설정할 수도 있습니다. 이를 통해 페이지의 요소 위치 지정과 관련된 많은 문제를 해결할 수 있습니다.

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

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

• .left (플로트:왼쪽;)
• .right(플로트:오른쪽)

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

• .left (플로트:왼쪽;)
• .right(플로트:오른쪽)
• 바닥글(지우기:둘 다)

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

수직 정렬

CSS 방식으로 가운데 정렬을 설정하는 것만으로는 충분하지 않은 경우가 있으며, 자식 블록의 세로 위치도 변경해야 합니다. 모든 인라인 또는 인라인 블록 요소는 위 또는 아래로 플러시될 수 있고 부모 요소의 중간에 있거나 어떤 위치에 있을 수 있습니다. 대부분의 경우 블록은 vertical-align 속성을 사용하여 가운데 정렬해야 합니다. 두 개의 블록이 있고 하나는 다른 블록 안에 중첩되어 있다고 가정해 봅시다. 이 경우 내부 블록은 inline-block 요소(display: inline-block)입니다. 자식 블록을 세로로 정렬해야 합니다.

• 상단 정렬 - .child(vertical-align:top);
• 가운데 정렬 - .child(vertical-align:middle);
• 아래쪽 정렬 - .child(vertical-align:bottom);

블록 수준 요소는 text-align 또는 vertical-align의 영향을 받지 않습니다.

정렬된 블록의 가능한 문제

때때로 CSS 방식으로 div를 중앙에 배치하면 약간의 문제가 발생할 수 있습니다. 예를 들어 float를 사용하는 경우: .first, .second 및 .third의 세 블록이 있다고 가정해 보겠습니다. 두 번째와 세 번째 블록은 첫 번째 블록에 있습니다. 클래스가 second 인 요소는 왼쪽 정렬되고 마지막 블록은 오른쪽 정렬됩니다. 정렬 후 둘 다 스트림에서 떨어졌습니다. 부모 요소에 높이가 설정되어 있지 않은 경우(예: 30em) 더 이상 자식 블록의 높이까지 늘어나지 않습니다. 이 오류를 방지하기 위해 .second 및 .third를 보는 특수 블록인 "스페이서"를 사용합니다. CSS 코드:

• .second(플로트:왼쪽)
• .제3(부동수:오른쪽)
• .clearfix(높이:0; 지우기: 둘 다;)

:after 의사 클래스가 자주 사용되며 의사 스페이서를 생성하여 블록을 제자리에 다시 놓을 수도 있습니다(예에서 컨테이너 클래스가 있는 div는 .first 내부에 있고 .left 및 .right를 포함합니다).

• .left(플로트:왼쪽)
• .right(플로트:오른쪽)
• .container:after(내용:""; 디스플레이:테이블; 지우기:둘 다;)

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

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

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

브라우저 창의 중앙에 이미지나 텍스트를 설정하는 것은 어려운 일이 없을 것 같습니다. 우리는 CENTER 태그를 사용하고 모든 것이 우리가 의도한 곳에 들어갑니다. 그러나 모든 것이 그렇게 간단하지는 않습니다. 중앙 정렬에는 세 가지 방법이 있으며, 각각 고유한 특성과 다른 브라우저의 차이점이 있습니다.

가장 간단하고 편리한 태그 중 하나인 CENTER는 텍스트 블록을 정렬하도록 설계되었습니다. 이 태그는 그림과 테이블을 중앙에 배치하는 데에도 사용할 수 있습니다. 예외는 요소입니다. 또는 정렬은 IMG 태그의 속성에 의해 설정됩니다. 따라서 요소를 배치하면 CENTER 태그 안에 그림이 오른쪽 정렬됩니다.

예 4.1. CENTER 태그를 사용한 센터링

이 텍스트는 브라우저 창의 중앙에 정렬되고 기본
오른쪽에 그림을 그립니다.

공식적으로 CENTER는 다른 블록 태그(P, PRE 등)에 대한 매개변수로만 사용해야 합니다. 그러나 Netscape Navigator 2.0 브라우저에서는 CENTER가 독립형 태그로 도입되었습니다. 이 추가는 블록 태그를 사용할 때 나타나는 여분의 세로 패딩을 제거하기 위한 것입니다. CENTER 태그 대신 텍스트가 단락 안에 배치되는 경우 (

) , 수평선과 이 텍스트 사이에 추가 세로 패딩이 나타납니다.

CENTER는 HTML 사양의 일부가 아닙니다. "공식"에서 HTML 서식, 텍스트 정렬과 같은 태그 속성을 통해 수행해야 합니다(예:

) 또는 스타일을 사용합니다. 그럼에도 불구하고 이 태그는 존재할 권리를 얻었습니다. 그러나 HTML 4 W3 사양이 출시된 이후 컨소시엄은 CENTER 태그의 사용을 피하고 요소가

, 예 4.2에 표시된 대로.

예 4.2. DIV 태그를 사용한 중앙 정렬

---

중심을 맞추는 또 다른 방법은 스타일을 사용하는 것입니다. 스타일은 글꼴, 색상, 정렬 등과 ​​같은 서식 속성을 제어할 수 있는 지침입니다. P 태그를 텍스트 중앙에 재정의하는 예입니다.

예 4.3. 스타일을 중심으로

이제 위의 P 태그를 사용할 때
스타일을 적용하면 단락의 텍스트가 브라우저 창의 중앙에 정렬됩니다.