블록 요소를 중앙 정렬하는 방법은 무엇입니까?

CSS의 여백 속성은 블록 요소(예: div)를 가로로 중앙에 배치하는 데 사용할 수 있습니다. 컨테이너가 늘어나는 것을 방지하는 요소의 너비를 설정할 수 있습니다. 블록 요소는 전체 공간 라인을 차지하며, 블록 요소가 컨테이너의 100%를 소유하므로 다른 요소가 다음 라인을 차지하도록 강제합니다.

블록 요소 중앙 정렬

새 줄을 시작하는 웹페이지의 모든 요소는 블록 수준 요소로 간주됩니다. 예를 들어 제목 태그, div 등

이러한 블록 요소는 웹 페이지의 전체 너비를 차지합니다. 웹 페이지에 웹 페이지의 10%만 차지하는 요소가 있는데, 그것이 블록 요소라면 너비 자체의 100%를 차지한다고 가정해 보겠습니다.

블록 속성에 값을 설정하여 특정 요소의 표시 속성을 변경할 수 있습니다.

Syntax

디스플레이 속성을 살펴보겠습니다 -

으아악

위는 웹페이지에서 특정 요소의 모양을 정의하는 데 사용할 수 있는 표시 속성의 구문입니다.

마진 속성

이제 블록 요소가 어떻게 동작하는지 알았으므로 margin 속성을 사용하여 요소를 수평으로 정렬하겠습니다.

margin 속성은 블록 요소의 위치를 ​​제어합니다. 여백은 수평및 수직평면 모두에서 요소를 제어하므로 요소가 중앙에 정렬되는 방식으로 이 속성을 사용합니다.

문법

마진 속성의 구문을 살펴보겠습니다 -

으아악

여기에 여백 속성의 구문이 제공되며 블록 요소가 중앙에 오도록 여백을 왼쪽에서 오른쪽으로 지정해야 합니다. auto 값을 사용하면 블록 요소가 자동으로 중앙에 위치하도록 여백을 설정할 수 있습니다.

NOTE - text-align 속성과 해당 값 중심이 있습니다. 이 속성은 단락, 범위 태그 등과 같은 비블록 요소를 중앙에 배치하는 데 사용되므로 이 방법과 함께 사용할 수 없습니다.

예

이 속성의 기능을 더 잘 이해하기 위해 CSS 속성 섹션에서 여백이 자동으로 설정된 div와 일부 헤더를 추가한 다음 두 개의 내부 링크된 블록으로 정렬하는 예를 살펴보겠습니다. 연결된 블록은 함께 움직입니다. div의 다양한 색상은 인라인 블록 등과 같은 다양한 디스플레이에 대해 알려줍니다.

으아악

위 출력에서 ​​제목과 div 요소가 단락 태그와 함께 회전되는 것을 볼 수 있습니다. text-align 속성을 사용하여 단락 태그를 가운데 및 여백 속성에 정렬하고 해당 값을 auto로 설정하여 블록 요소를 정렬합니다.

예

아래 프로그램에서는 이미지와 이미지 옆에 비블록 요소를 가져옵니다. 그런 다음 이미지의 표시를 블록으로 설정하고 여백을 자동으로 설정한 다음 제목과 함께 중앙에 정렬하고 단락의 표시 속성을 인라인 블록으로 설정합니다.

으아악

출력에서 우리가 원하는 대로 이미지가 중앙에 있고 텍스트가 다음 줄에 있는 것을 볼 수 있습니다.

결론

블록 요소를 중앙에 정렬하는 것은 균형 있고 대칭적인 레이아웃을 만드는 좋은 방법입니다. 텍스트 정렬이나 여백 자동 값을 사용하여 디자인의 모든 요소를 ​​쉽고 빠르게 정렬할 수 있습니다. 조금만 연습하면 이러한 기술을 자신있게 사용할 수 있습니다!

위 내용은 블록 요소를 중앙 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!