요소와 그 콘텐츠를 가로, 세로 또는 중앙에 정렬하는 다양한 옵션을 제공하는 CSS를 사용하여 요소 또는 그 안의 콘텐츠를 정렬할 수 있습니다.
수평 정렬
- 인라인 요소
CSS text-align 속성을 사용하여 텍스트, 앵커, 스팬 등과 같은 인라인 요소 또는 인라인 블록 요소를 수평으로 정렬할 수 있습니다.
- 블록 수준 요소
div, p 등과 같은 블록 수준 요소는 CSS margin 속성을 사용하여 수평으로 정렬할 수 있지만 요소의 너비는 부모에 대해 100%가 아니어야 합니다. 그러면 정렬이 필요하지 않기 때문입니다.
- 플로트 또는 위치 체계를 사용하는 블록 수준 요소
여러 요소를 중앙이 아닌 왼쪽/오른쪽으로 정렬하거나 CSS 위치 지정 체계 절대 방법을 사용하여 여러 요소를 정렬하는 CSS float 속성을 사용하여 요소를 수평으로 정렬할 수 있습니다.
예시
CSS 수평 정렬의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
padding: 10px;
width: 70%;
margin: 0 auto;
background-color: #f06d06;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.seats span, .backSeats div{
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
}
.seats span{
width: 120px;
display: inline-block;
background-color: #48C9B0;
}
.left{
text-align: left;
}
.right{
text-align: right;
}
.center{
text-align: center;
}
.seats{
text-align: center;
}
.backSeats div {
background-color: #dc3545;
}
.leftFloat{
float: left;
}
.rightAbsolute{
position: absolute;
right: 150px;
}
</style>
</head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
<div class="backSeats">
<div class="leftFloat">Premium 1</div>
<div class="leftFloat">Premium 2</div>
<div class="rightAbsolute">Premium 3</div>
</div>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
수직 정렬
- 인라인 요소
텍스트, 앵커 등과 같은 인라인 요소 또는 인라인 블록 요소는 CSS 패딩, CSS line-height 또는 CSS vertical-align 속성을 사용하여 수직으로 정렬할 수 있습니다.
- 블록 수준 요소
div, p 등과 같은 블록 수준 요소는 CSS margin 속성, CSS align-items와 함께 CSS flex 속성을 사용하거나 CSS transform 속성이 있는 위치 지정 체계 메서드 절대를 사용하여 수직으로 정렬할 수 있습니다.
예시
CSS 수직 정렬의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
padding: 10px;
width: 70%;
margin: 0 auto;
background-color: #f06d06;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.seats span:not(.withPadding){
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
}
.seats span:not(.vertical){
height: 40px;
display: inline-block;
background-color: #48C9B0;
}
.withPadding{
padding: 20px 20px 0px;
height: 20px;
color: white;
border: 4px solid #000;
}
.vertical{
display: inline-table;
background-color: #48C9B0;
height: 40px;
}
.verticalText {
display: table-cell;
vertical-align: middle;
}
.withLineHeight{
line-height: 40px;
}
.seats{
text-align: center;
}
.backLeftSeat{
background-color: #dc3545;
max-height: 100px;
height: 70px;
margin: 20px;
width: 300px;
display: inline-block;
position: relative;
resize: vertical;
overflow: auto;
border: 4px solid #000;
}
.withPosition{
position: absolute;
top: 50%;
left: 2px;
right: 2px;
color: white;
padding: 20px;
transform: translateY(-50%);
}
.backRightSeats{
height: 122px;
width: 800px;
float: right;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.withFlex {
background-color: #dc3545;
border: 4px solid #000;
margin-right: 10px;
color: white;
padding: 20px;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="withPadding">Adam</span>
<span class="withLineHeight">Martha</span>
<span class="vertical"><p class="verticalText">Samantha</p></span>
<div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backRightSeats">
<div class="withFlex">Premium Solo 1</div>
<div class="withFlex">Premium Solo 2</div>
<div class="withFlex">Premium Solo 3</div>
</div>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
div가 조정되지 않은 경우
div가 조정될 때
중앙 정렬
위에서 언급한 수평 및 수직 정렬 방법을 사용하여 요소를 중앙에서 정렬할 수 있습니다.