CSS Alignment(요소 정렬)

CSS는 웹 요소를 정렬할 수 있는 여러 속성을 가지고 있습니다.

문자 정렬

적절히 설정된텍스트 정렬，를 사용하여 정렬블록요소 내의 텍스트。

h1　{
　　　　text-align:　center;
}
p　{
　　　　text-align:　left;
}

다음을 참조하세요CSS 텍스트教程，以了解有关文本格式的更多信息。

margin 속성을 사용하여 중앙 정렬

블록요소의 중앙 정렬은 CSS margin 속성의 가장 중요한 의미 중 하나입니다. 예를 들어, 왼쪽과 오른쪽 마argins을 auto로 설정하여 <div> 컨테이너를 수평 중앙에 정렬할 수 있습니다.

div　{
　　　　width:　50%;
　　　　margin:　0　auto;
}

위 예제의 스타일 규칙은 요소를 수평 중앙에 정렬합니다。

position 속성을 사용하여 요소를 정렬

CSS positionleft, right, top, bottom와 함께 사용하여, 요소가 문서의 뷰포트에 상대적으로 정렬되거나 부모 요소를 포함할 수 있습니다.

.up　{
　　　　position:　absolute;
　　　　top:　0;
}
.down　{
　　　　position:　absolute;
　　　　bottom:　0;
}

정렬 요소에 대한更多信息를 알고 싶다면 다음을 참조하세요CSS 정렬教程。

float 속성을 사용하여 좌우 정렬

CSS의float이 속성은 요소가 왼쪽 또는 오른쪽에 정렬된 포함 블록의 요소에 대해 사용하여, 다른 내용이 그 쪽으로 흐를 수 있도록 정렬할 수 있습니다.

따라서, 요소가 왼쪽으로 풍선되면 내용은 그 오른쪽으로 흐릅니다. 반대로, 요소가 오른쪽으로 풍선되면 내용은 그 왼쪽으로 흐릅니다.

div　{
　　　　width:　200px;
　　　　float: 왼쪽;
}

浮动 제거

浮动布局을 사용할 때 가장 혼란스러운 것 중 하나는 접기된 부모입니다. 부모 요소는 자동으로 확장되어 풍선 요소를 포함하지 않습니다. 그러나 부모가 시각적으로 쉽게辨认할 수 있는 배경이나 경계선을 포함하지 않는다면 이는 항상 명확하지 않으며, 이를 방지하기 위해 이상한 레이아웃과 브라우저 간 문제를 방지하기 위해 주의하고 처리해야 하는 것이 중요합니다. 아래 그림을 참조하세요：

그것을 보세요

요소는 자동으로 확장되어浮动 이미지를 포함할 수 없습니다. 이 문제를 해결하기 위해 컨테이너 내의 float 요소 이후, 컨테이너 요소의 닫기 태그 전에 clear float을 사용할 수 있습니다.

접근성 부모 수정

CSS 접근성 부모 문제를 해결할 수 있는 여러 가지 방법이 있습니다. 다음 장에서 이러한 해결책과 실시간 예제를 소개하겠습니다.

해결책1：浮动 컨테이너

이 문제를 해결하는 가장 간단한 방법은 포함된 부모 요소를 float로 설정하는 것입니다.

.container {
　　　　float: 왼쪽;
　　　　배경: #f2f2f2;
}

해결책2：공백 Div 사용

이는 오래된 방법입니다. 그러나 모든 브라우저에서 사용할 수 있는 간단한 해결책입니다.

.clearfix {
　　　　clear: 모두;
}
/*　html 코드 슬라이드　*/

이 작업을 수행하기 위해 태그를 사용할 수도 있습니다. 그러나 이 방법은 비语义 코드를 태그에 추가할 수 있으므로 권장하지 않습니다.

해결책3：:after 위장 요소 사용

이:after 위장 요소연합content이 자산은 이미 많이 사용되어 흐름 계산 문제를 해결하는 데 사용되었습니다.

.clearfix:after {
　　　　content: ".";
　　　　display: 블록;
　　　　height: 0;
　　　　clear: 모두;
　　　　visibility: 숨기기;
}

이 클래스.clearfix는 모든 부모 요소가 float를 가진 컨테이너에 적용됩니다。