HTML 요소를 수평/수직 방향으로 정렬하는 방법

CSS

수평 정렬: 수평으로 정렬하고 싶은 대상 요소의 부모요소에서 설정

HTML 요소들을 수평방향으로 정렬하는 방법에 대해 알아보자.

[1] inline/inline-block 요소

수평으로 정렬하고 싶은 요소의 부모요소에 “text-align”을 사용한다.

예를 들어, Navigation의 각 요소(a 태그)들을 수평으로 정렬시키기 위해서는 a 태그의 부모요소인 nav 태그에 “text-align:center;”를 적용해야한다.


[2] block 요소

수평으로 정렬하고 싶은 요소가 block 요소일 경우, 정렬대상 요소에 width를 설정하고, margin-left와 margin-right를 auto로 설정한다.

예를 들면, 다음과 같다.


그런데, 만약 block 요소가 여러개일 경우, 정렬대상 block 요소를 inline-block으로 변경하고, 정렬대상 block 요소의 부모요소에 “text-align:center;”를 적용해야한다.

만약, 정렬대상 block 요소에 width를 지정하지 않으면, 콘텐츠에 width가 맞추어 width가 결정되므로 명시적으로 width를 지정해야한다.


[3] FlexBox를 이용한 수평정렬

정렬대상 요소의 부모요소에 다음과 같이 flex를 적용하면 정렬대상 요소가 수평으로 정렬된다.


수직 정렬

HTML 요소들을 수직방향으로 정렬하는 방법에 대해 알아보자.

[1] inline/inline-block 요소

[1-1] single line

정렬대상 요소의 부모 요소에 padding-top과 padding-bottom 값을 동일하게 적용한다.

만약, padding을 사용할 수 없다면, 정렬대상 요소에 height와 line-height 값을 동일하게 적용한다.

1
2
3
4
5
6
7
8
.main a {
  background: black;
  height: 100px; //
  line-height: 100px; //
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}


[1-2] Multiple line

수직정렬을 할 line이 여러개일 경우, vertical-align을 사용하는 방법도 가능한데, table 속성을 사용해야한다.

수직정렬 대상요소의 부모요소에 table을 사용하고, 수직정렬 대상요소에 table-cell과 vertical-align을 사용한다.

1
2
3
4
5
6
7
8
.parent {
  display: table;
  height: 100px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

예를 들면, 다음과 같다.

또는, padding-top과 padding-bottom 값을 동일하게 적용하는 방법도 가능하다.


[1-3] FlexBox

수직정렬 대상요소의 부모요소에 다음과 같이 flex를 적용하면 된다.

1
2
3
4
5
6
.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}


[2] block 요소

[2-1] 해당 요소의 높이가 고정되어 있는 경우(ex) height: 100px;)

부모 요소를 기준으로 절대 위치를 지정한다.

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; // 요소의 높이(100px)의 반 만큼 위로 이동
}

예를 들면, 다음과 같다.


[2-2] 해당 요소의 높이가 고정되어 있지 않는 경우

부모 요소를 기준으로 절대 위치를 지정한다.

1
2
3
4
5
6
7
8
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); // 요소의 높이의 반(50%) 만큼 위로 이동
}

예를 들면, 다음과 같다.


[2-3] FlexBox 사용

부모 요소에 Flexbox를 지정한다.

1
2
3
4
5
.parent {
  display: flex;
  flex-direction: column; // 위에서 아래로 수직 배치
  justify-content: center; // 중앙정렬
}