CSS 레이아웃 - 수평 및 수직 정렬
가로 및 세로 가운데 요소
중심 정렬 요소
블록 요소(예: <div>)를 가로로 가운데에 맞추려면 다음을 사용하십시오.margin: auto;
요소의 너비를 설정하면 요소가 컨테이너의 가장자리까지 늘어나는 것을 방지할 수 있습니다.
그러면 요소가 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에 균등하게 분할됩니다.
이 div 요소는 중앙에 있습니다.
예시
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
참고:width 속성이 설정되지 않은 경우(또는 100%로 설정되는 경우) 가운데 맞춤은 효과 가 없습니다.
텍스트 가운데 맞춤
요소 내부의 텍스트를 가운데에 맞추려면 다음을 사용하십시오.text-align: center;
이 텍스트는 중앙에 있습니다.
예시
.center {
text-align: center;
border: 3px solid green;
}
팁: 텍스트를 정렬하는 방법에 대한 더 많은 예는 CSS 텍스트 장을 참조하십시오.
이미지 중앙에 맞추기
이미지를 가운데에 맞추려면 왼쪽 및 오른쪽 여백을 로 설정 auto하고 block요소로 만듭니다.
예시
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
왼쪽 및 오른쪽 정렬 - 위치 사용
요소를 정렬하는 한 가지 방법은 다음을 사용하는 것입니다 position: absolute;.
더 젊고 취약한 시절에 아버지는 제가 그 이후로 마음속에 새기고 있는 몇 가지 조언을 주셨습니다.
예시
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
참고: 절대 위치 요소는 일반 흐름에서 제거되며 요소와 겹칠 수 있습니다.
왼쪽 및 오른쪽 정렬 - float 사용
요소를 정렬하는 또 다른 방법은 float속성을 사용하는 것입니다.
예시
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
클리어픽스 해킹
참고: 요소가 포함하는 요소보다 키가 크고 떠 있는 경우 컨테이너 외부에서 오버플로됩니다. "clearfix hack"을 사용하여 이 문제를 해결할 수 있습니다(아래 예 참조).
Clearfix 없이
클리어픽스와 함께
그런 다음 이 문제를 해결하기 위해 포함하는 요소에 clearfix 핵을 추가할 수 있습니다.
예시
.clearfix::after {
content: "";
clear: both;
display: table;
}
세로 중앙 - 패딩 사용
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.