요소를 수평 및 수직으로 정렬할 수 있습니다. 다른 방법들. 방법의 선택은 요소 유형(블록 또는 인라인), 위치 지정 유형, 크기 등에 따라 다릅니다.

1. 블록/페이지 중앙에 수평 정렬

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

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

1.2. 블록이 다른 블록 내에 중첩되어 있고 너비/폭이 설정되지 않은 경우:

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

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

2. 수직정렬

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

2.2. 상위 블록 내에서 수직으로 블록을 정렬하려면 다음을 수행하십시오.

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

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

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

요소에 치수가 있는 경우

요소에 크기가 없고 비어 있지 않은 경우

2.5. 절대 블록 포지셔닝

페이지 중앙에

블록 중앙에

작성자:블로그 페이지에 다시 오신 것을 환영합니다. 오늘 글에서는 블록과 그 내용 모두에 적용할 수 있는 다양한 정렬 기술에 대해 이야기하고자 합니다. 특히 텍스트 정렬뿐만 아니라 css에서 블록을 정렬하는 방법.

블록을 중앙에 정렬

CSS에서 블록을 중앙에 배치하는 것은 쉽습니다. 이것은 많은 사람들에게 가장 유명한 기술이지만 우선 지금 당장 이야기하고 싶습니다. 이는 상위 요소에 대해 수평으로 중앙에 위치하도록 되어 있습니다. 어떻게 수행됩니까? 컨테이너가 있고 테스트 대상이 그 안에 있다고 가정해 보겠습니다.

이것이 사이트의 헤더라고 가정해 봅시다. 그것은 창의 전체 너비에 걸쳐 있지 않으며 중앙에 배치해야 합니다. 우리는 다음과 같이 씁니다.

정확한 또는 최대 너비를 지정한 다음 key 속성인 margin: 0 auto를 작성해야 합니다. 헤더의 여백을 설정하고 첫 번째 값은 위쪽과 아래쪽의 여백을 결정하고 두 번째 값은 오른쪽과 왼쪽으로 여백을 결정합니다. auto 값은 요소가 부모 요소의 중앙에 정확히 오도록 양쪽의 패딩을 자동으로 계산하도록 브라우저에 지시합니다. 편안한!

텍스트 정렬

이것은 또한 매우 간단한 트릭입니다. 모든 인라인 요소를 정렬하려면 텍스트 정렬 속성과 해당 값(left, right, center)을 사용할 수 있습니다. 후자는 우리가 원하는 텍스트를 중앙에 배치합니다. 그림도 기본적으로 인라인 요소이기 때문에 같은 방식으로 정렬할 수 있습니다.

텍스트를 세로로 정렬

그러나 이것은 이미 더 어렵습니다. 기본적으로 블록 컨테이너의 텍스트를 세로로 쉽게 중앙에 배치하는 단순하고 잘 알려진 속성은 없습니다. 그러나 레이아웃 디자이너가 수년에 걸쳐 생각해 낸 몇 가지 요령이 있습니다.

패딩을 사용하여 블록 높이를 설정합니다. 그 방법은 높이로 명시적으로 높이를 설정하지 않고 인위적으로 위쪽과 아래쪽 패딩을 넣어 동일하게 만드는 것입니다. 블록을 만들고 다음 속성을 작성해 보겠습니다.

div( 배경: #ccc; 패딩: 30px 0; )

배경은 가장자리와 패딩을 시각적으로 보기 위한 것입니다. 이제 블록의 높이는 이 두 개의 들여쓰기와 줄 자체로 구성되며 모두 다음과 같습니다.

블록의 선 높이를 정의합니다. 한 줄의 텍스트를 정렬해야 하는 경우 이것이 더 올바른 방법인 것 같습니다. 높이 속성을 사용하여 정상 높이를 기록할 수 있습니다. 그런 다음 블록 전체의 높이와 동일하게 선의 높이도 설정해야 합니다.

div( 높이: 60px; 선 높이: 60px; )

결과는 위의 그림과 비슷할 것입니다. 패딩을 추가해도 모든 것이 작동합니다. 단, 한 줄에 한함. 요소에 더 많은 텍스트가 필요한 경우 이 방법작동 안 할 것이다.

블록을 테이블 셀로 변환합니다. 이 방법의 핵심은 vertical-align: middle 속성이 테이블 셀에 작용하여 요소를 수직으로 중앙에 배치한다는 것입니다. 따라서 이 경우 블록을 다음과 같이 설정해야 합니다.

div( 디스플레이: 테이블 셀; 세로 정렬: 중간; )

이 방법은 원하는 만큼 텍스트를 중앙에 정렬할 수 있기 때문에 좋습니다. 그러나 display: table을 div가 중첩된 블록으로 설정하는 것이 좋습니다. 그렇지 않으면 작동하지 않을 수 있습니다.

자, 오늘의 마지막 트릭입니다. 이것은 블록 자체를 수직으로 정렬하는 것입니다. 이를 위해 특별히 의도된 속성은 없지만 알아야 할 몇 가지 요령이 있음을 다시 말해야 합니다.

오프셋을 백분율로 설정합니다. 상위 요소의 높이를 알고 그 안에 다른 블록 수준 요소를 배치하는 경우 백분율 패딩을 사용하여 중앙에 배치할 수 있습니다. 예를 들어 부모의 높이는 600px입니다. 높이가 300px인 블록을 그 안에 넣습니다. 중심을 잡으려면 위와 아래에서 어느 정도 백업해야 합니까? 각각 150픽셀, 부모 높이의 25%입니다.

이 방법을 사용하면 치수가 계산을 허용하는 경우에만 센터링을 수행할 수 있습니다. 높이가 887픽셀인 부모가 있는 경우 정확히 아무것도 쓸 수 없습니다. 이는 이미 명확합니다.

테이블 셀에 요소를 삽입합니다. 다시 말하지만, 상위 요소를 테이블 셀로 변환하면 여기에 삽입된 블록이 자동으로 수직 중앙에 배치됩니다. 이를 위해 부모는 vertical-align: middle을 설정하기만 하면 됩니다.

그리고 여기에 추가로 margin: 0 auto를 작성하면 요소가 수평 중앙에 정렬됩니다!

텍스트 정렬 정의 모습및 단락 가장자리의 방향이며 왼쪽, 오른쪽, 중앙 또는 양쪽 맞춤이 가능합니다. 테이블에서. 1은 텍스트 블록 정렬 옵션을 보여줍니다.

가장 일반적인 옵션은 왼쪽 정렬로, 왼쪽 텍스트는 가장자리로 이동하고 오른쪽 텍스트는 들쭉날쭉하게 유지됩니다. 오른쪽 및 가운데 정렬은 주로 제목과 부제목에서 사용됩니다. 텍스트에서 정당화를 사용할 때 단어 사이에 큰 간격이 나타날 수 있으며 이는 그다지 아름답지 않다는 점을 명심해야 합니다.

단락 태그는 일반적으로 텍스트 정렬을 설정하는 데 사용됩니다.

정렬 방법을 지정하는 align 속성을 사용합니다. 태그를 사용하여 텍스트 블록을 정렬하는 것도 허용됩니다.