CSS 레이아웃 - 수평과 수직 정렬
- 이전 페이지 CSS inline-block
- 다음 페이지 CSS 컴보이너
요소가 가운데 정렬되었습니다.
요소를 가운데 정렬하십시오.
블록 요소(예: <div>)을 수평으로 가운데 정렬하려면, 다음을 사용하십시오. margin: auto;.
요소의 너비를 설정하면 그가 컨테이너의 경계에 이르러 나가지 않도록 합니다.
그런 다음, 요소는 지정된 너비를 차지하고, 남은 공간은 두 외경 간에 평균적으로 배분됩니다:
예제
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 20px;
}
주의:설정되지 않았다면 width 속성(또는 그를 100％로 설정)을 사용하면 가운데 정렬이 유효하지 않습니다.
텍스트를 가운데 정렬하십시오.
요소 내에 텍스트만 가운데 정렬하려면, 다음을 사용하십시오. text-align: center;:
예제
.center {
text-align: center;
border: 3px solid green;
}
힌트:텍스트를 정렬하는 방법에 대한 더 많은 예제를 보려면, 다음을 참조하십시오. CSS 텍스트 이 장.
이미지를 가운데 정렬하십시오.
이미지를 가운데 배치하려면, 좌우 외경을 설정하십시오. auto그리고 블록 요소로 설정하세요:}
예제
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
왼쪽과 오른쪽 정렬 - position 사용
요소 정렬의 또 다른 방법은 position: absolute; :
예제
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 20px;
}
주의:절대 정렬 요소는 일반 스트림에서 제거되고, 요소 중복이 발생할 수 있습니다.
왼쪽과 오른쪽 정렬 - float 사용
요소 정렬의 또 다른 방법은 float 속성:
예제
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
주의:만약 요소가 포함하는 요소보다 높고, 그것이 블로킹 요소라면, 그것은 컨테이너를 벗어날 수 있습니다. 다음을 사용하여 clearfix hack 을 추가하여 이 문제를 해결할 수 있습니다(아래 예시를 참조하세요).
clearfix Hack
그런 다음 포함 요소에 overflow: auto;이 문제를 해결하기 위해 다음과 같이 합니다:
예제
.clearfix {
overflow: auto;
}
수직 정렬 - padding 사용
CSS에서 요소를 수직 정렬하는 방법이 많이 있습니다. 간단한 해결책은 상하 내간격을 사용하는 것입니다:
예제
.center {
padding: 70px 0;
border: 3px solid green;
}
수직과 수평 정렬을 동시에 필요한 경우, 다음을 사용하십시오 padding 과 text-align: center;:
예제
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
수직 정렬 - line-height 사용
또 다른 기술은그 값은 height 속성 값의 line-height 속성:
예제
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 여러 줄 텍스트가 있을 경우 다음 코드를 추가하세요: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
수직 정렬 - position 과 transform 사용
만약 선택이 padding 과 line-height이면, 다른 해결책은 position 과 transform 속성:
예제
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
힌트:당신은 제 2D 변환 이 장에서 transform 속성에 대해 더 많은 지식을 배웁니다.
수직 정렬 - Flexbox 사용
당신은 또한 flexbox를 사용하여 내용을 중앙 정렬할 수 있습니다. 주의할 점은 IE10 및 이전 버전에서 flexbox가 지원되지 않는다는 것입니다:
예제
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
힌트:당신은 제 CSS Flexbox 이 장에서는 Flexbox에 대해 더 많은 지식을 배웁니다.
- 이전 페이지 CSS inline-block
- 다음 페이지 CSS 컴보이너
