가운데 맞춤 : CSS 레이아웃

페이지 레이아웃이 종종 필요할 때CSS 방식으로 중심 정렬 : 예를 들어 메인 블록 중심. 이 문제를 해결하기위한 몇 가지 옵션이 있습니다. 각 옵션은 조판자가 사용해야합니다.

텍스트를 중앙에 맞 춥니 다.

장식적인 목적으로 종종 물어볼 필요가 있습니다.가운데에 텍스트를 정렬하면 CSS가 레이아웃 시간을 줄일 수 있습니다. 이전에는 HTML 속성을 사용하여이 작업을 수행했지만 이제 표준에서는 스타일 시트를 사용하여 텍스트를 정렬해야합니다. 바깥 쪽 여백을 변경해야하는 블록과 달리 중앙의 CSS 텍스트 정렬은 한 줄로 수행됩니다.

텍스트 정렬 : 가운데;

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

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

중심 블록 정렬

중앙, CSS에서 div의 정렬을 설정 해야하는 경우외부 여백 들여 쓰기를 사용하면 상당히 편리한 방법을 제공 할 수 있습니다. 들여 쓰기는 블록 요소와 라인 블록 모두로 설정할 수 있습니다. 특성 값은 0 (세로 들여 쓰기) 및 자동 (자동 가로 들여 쓰기) 값을 가져야합니다.

여백 : 0 자동;

이제이 옵션은 정확히 인식됩니다유효합니다. 들여 쓰기를 사용하면 중앙에 이미지의 정렬을 설정할 수 있습니다. CSS margin 속성을 사용하면 페이지에서 요소를 배치하는 것과 관련된 많은 문제를 해결할 수 있습니다.

왼쪽 또는 오른쪽 블록 정렬

때때로 CSS 방식의 중심 정렬이 아닌 경우필요하지만 두 블록을 나란히 배치해야합니다. 하나는 왼쪽 가장자리에서, 다른 하나는 오른쪽에서. 이렇게하려면 왼쪽, 오른쪽 또는 없음의 세 가지 값 중 하나를 사용할 수있는 float 속성이 있습니다. 나란히 배치해야하는 두 개의 블록이 있다고 가정하십시오. 그런 다음 코드는 다음과 같습니다.

.left {float : left;}
.right {float : right}

첫 번째 두 블록 아래에 있어야하는 세 번째 블록 (예 : 바닥 글)이 있으면 clear 속성을 등록해야합니다.

.left {float : left;}
.right {float : right}
바닥 글 {clear : both}

사실 클래스가 왼쪽과 오른쪽 인 블록일반적인 흐름에서 제외됩니다. 즉, 다른 모든 요소는 정렬 된 요소의 존재를 무시합니다. clear : both 속성을 사용하면 바닥 글이나 다른 블록에서 스트림에서 떨어진 요소를 볼 수 있으며 왼쪽과 오른쪽에 모두 떠 다니는 것이 금지됩니다. 따라서이 예에서는 바닥 글이 아래로 이동합니다.

수직 정렬

충분하지 않은 경우가 있습니다CSS-ways에서 가운데 정렬을 사용하면 여전히 자식 블록의 세로 위치를 변경해야합니다. 인라인 또는 인라인 블록 요소는 상위 요소의 중간 또는 임의의 위치에있는 위쪽 또는 아래쪽 가장자리로 눌러 질 수 있습니다. 대부분 중앙에 블록을 정렬해야합니다.이 경우 수직 정렬 속성이 사용됩니다. 하나는 다른 하나에 중첩 된 두 개의 블록이 있다고 가정합니다. 이 경우 내부 블록은 라인 블록 요소입니다 (표시 : 인라인 블록). 자식 블록을 세로로 정렬해야합니다.

상단 정렬-.child {수직 정렬 : 상단};
중심 정렬-.child {수직 정렬 : 중간};
하단 정렬-.child {vertical-align : bottom};

텍스트 정렬 또는 수직 정렬은 블록 요소에 영향을 미치지 않습니다.

정렬 된 블록에 가능한 문제

때때로 CSS 방식으로 div를 중심에 맞추기사소한 문제가 발생할 수 있습니다. 예를 들어, float :을 사용할 때 .first, .second 및 .third의 세 가지 블록이 있다고 가정합니다. 두 번째와 세 번째 블록은 첫 번째 블록에 있습니다. 클래스가 두 번째 인 요소는 왼쪽 정렬되고 마지막 블록은 오른쪽 정렬됩니다. 레벨링 후 둘 다 하천에서 떨어졌습니다. 부모 요소의 높이가 없으면 (예 : 30em) 자식 블록의 높이를 따라 스트레칭이 중지됩니다. 이 오류를 방지하려면 .second 및 .third를 표시하는 특수 블록 인“스페이서”를 사용하십시오. CSS 코드 :

.second {float : left}
.third {float : right}
.clearfix {높이 : 0; 클리어 : 둘 다;}

종종 사용 된 의사 클래스 :이후, 의사 스플리터를 생성하여 블록을 제자리에 반환 할 수 있습니다 (예 : 클래스 컨테이너가있는 div의 예에서는 .first 안에 있고 .left 및 .right를 포함 함).

.left {float : left}
.right {float : right}
.container : 이후 {content : ""; 디스플레이 : 테이블; 클리어 : 둘 다;}

여러 가지 변형이 있지만 위의 옵션이 가장 일반적입니다. 실험을 통해 의사 샘플을 생성하는 가장 쉽고 편리한 방법을 항상 찾을 수 있습니다.

다른 문제가 자주 발생조판 자-선 블록 요소의 정렬. 각각 후에 공백이 자동으로 추가됩니다. 음수 들여 쓰기로 설정된 margin 속성은 이에 대처하는 데 도움이됩니다. 훨씬 덜 자주 사용되는 다른 방법이 있습니다 (예 : 글꼴 크기 재설정). 이 경우 font-size : 0이 부모 요소의 속성에 지정됩니다. 텍스트가 블록 안에 있으면 원하는 글꼴 크기가 이미 인라인 블록 요소의 속성에 반환됩니다. 예를 들어 font-size : 1em입니다. 이 방법이 항상 편리한 것은 아니므로 들여 쓰기 옵션이 훨씬 더 자주 사용됩니다.