CSS, 몇몇 특성은 가로 요소를 정렬하는데 사용될 수있다.
센터 정렬 - 사용 margin
블록 레벨 요소의 폭을 설정하면 그 용기의 가장자리까지 뻗어 않도록한다. 사용 margin: auto; 수평으로 컨테이너 내에서 요소를 중심에.
요소는 지정된 폭을 차지하며, 나머지 공간은 두 개의 여백 사이에 균등하게 분할됩니다 :
팁 : 센터 정렬이 경우 아무런 효과가 없습니다 width 속성이 설정 (또는 100 %로 설정)되지 않습니다.
팁 : 텍스트를 정렬의 경우, 참조 CSS 텍스트 장.
왼쪽과 오른쪽 정렬 - 사용하여 position
요소를 정렬하기위한 하나의 방법은 사용하는 position: absolute; :
예
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} »그것을 자신을 시도 절대 위치 요소가 정상적인 흐름에서 제거하고, 요소를 중첩할 수 있습니다.
팁 :와 요소를 정렬 할 때 position , 항상 정의 margin 과 padding 에 대한 <body> 요소를. 이것은 다른 브라우저에서 시각적 차이를 방지하는 것입니다.
이 IE8에 문제가 또한 이전 버전 사용하는 경우 position . (우리의 경우 컨테이너 요소 경우 <div class="container"> ) 지정된 폭을 가지고 있으며, !DOCTYPE 선언이없는, IE8 및 이전 버전이 추가됩니다 17px margin 오른쪽에. 이 스크롤을 위해 예약 공간이 될 것으로 보인다. 그래서, 항상 설정 !DOCTYPE 사용할 때 선언 position :
예
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} »그것을 자신을 시도 왼쪽과 오른쪽 정렬 - 사용 float
요소를 정렬하기위한 다른 방법은 사용하는 float 특성 :
팁 :와 요소를 정렬하면 float , 항상 정의 margin 과 padding 에 대한 <body> 요소를. 이것은 다른 브라우저에서 시각적 차이를 방지하는 것입니다.
이 IE8에 문제가 또한 이전 버전 사용하는 경우 float . 는 IF !DOCTYPE 선언이없는, IE8 및 이전 버전이 추가됩니다 17px margin 오른쪽에. 이 스크롤을 위해 예약 공간이 될 것으로 보인다. 그래서, 항상 설정 !DOCTYPE 사용할 때 선언을 float :
예
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} »그것을 자신을 시도