Latest web development tutorials

CSS 수평 정렬 (수평 정렬)

CSS에서, 수평 정렬 요소에 대한 몇 가지 속성이 있습니다.

블록 요소를 정렬

블록 요소는 줄 바꿈을 전면과 후면의 전체 폭을하는 차지 요소입니다.

블록 요소의 예 :

  • <H1>
  • <P>
  • <DIV>

텍스트 정렬은 참조 CSS 텍스트 섹션을. .

이 장에서 우리는 어떻게 레이아웃 요소의 수평 정렬을 차단하는 방법에 대해 알아 보겠습니다.

센터 정렬 마진 속성을 사용하여,

블록 요소는 좌우 마진 "자동"배열로 설정 될 수있다.

참고 : IE8의 여백에 사용 : 자동 속성이 작동하지 않습니다 선언 DOCTYPE하지않는한!

마진 속성은 임의의 좌우 여백 설정이 자동으로 할당되고, 결과는 중간 요소의 등장으로 분할 될 수있다 :

예

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

»시도

팁 : 폭이 100 % 인 경우, 정렬은 효과적이지 않다.

주 : IE5는 처리 블록 요소 버그에 여유가있다.IE5에서 작업 위의 예제를 만들기 위해, 우리는 몇 가지 추가 코드를 추가해야합니다. 예

위치 속성을 사용하는 것은 왼쪽, 오른쪽 정렬로 설정

하나의 요소 정렬은 절대 위치를 사용하는 것입니다 :

예

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

»시도

절대 위치가 문서의 흐름과는 아무 상관이없는, 그래서 그들은 페이지의 다른 요소를 포함할 수 있습니다.

Crossbrowser 호환성 문제

이러한 요소, 소정의 마진과 패딩 요소가 항상 좋은 생각 일 때 <P 유사한 맞 춥니 다. 이것은 다른 브라우저에서 시각적 차이를 방지하는 것입니다.

위치 속성을 사용할 때 IE8 이전 버전은 문제가있다. (이 경우에는 <DIV 클래스 = "용기">) 컨테이너 요소 지정된 폭이 ,! DOCTYPE 선언이없는 경우, IE8 및 이전 버전의 오른쪽에 17px의 마진을 추가합니다. 이 롤링 예약 공간이 될 것으로 보인다. 위치 속성을 사용하는 경우 항상 DOCTYPE 선언에 설정되어 있습니다!

예

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

»시도

플로트 속성을 사용하여 마우스 오른쪽 정렬, 왼쪽으로

플로트 속성을 사용하여 상기 정렬 부재의 한 방법 :

예

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

»시도

Crossbrowser 호환성 문제

이런 식으로 정렬 된 요소는 미리 결정된 마진과 패딩 요소는 항상 좋은 생각이다. 이것은 다른 브라우저에서 시각적 차이를 방지하는 것입니다.

플로트 속성을 사용할 때 IE8 이전 버전은 문제가있다. (이 경우에는 <DIV 클래스 = "용기">) 컨테이너 요소 지정된 폭이 ,! DOCTYPE 선언이없는 경우, IE8 및 이전 버전의 오른쪽에 17px의 마진을 추가합니다. 이 롤링 예약 공간이 될 것으로 보인다. 플로트 속성을 사용하는 경우 항상 DOCTYPE 선언에 설정되어 있습니다!

예

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

»시도