align

div 와 같은 block 요소를 수평으로 가운데 배치하려면 margin: auto;를 사용하였다.

1
2
3
4
5
6
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

하지만 내부의 텍스트를 가운데 정렬하기 위해서는 text-align: center;를 사용한다.

1
2
3
4
.center {
  text-align: center;
  border: 3px solid green;
}

이미지 가운데 정렬

image를 가운데 정렬하기 위해서는 block 요소로 바꾸고 width를 설정해준 뒤 margin:auto; 속성을 사용한다.

1
2
3
4
5
6
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

좌우 정렬 - position 속성

좌우 정렬을 위해서 position:absolute; 속성을 사용할 수 있다.

1
2
3
4
5
6
7
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73ad21;
  padding: 10px;
}

position:absolute 속성은 기본 flow를 제거하므로 다른 요소에 오버랩 될 수 있다.

clearfix 팁

만약, 요소가 요소를 감싸는 컨테이닝 블록보다 길고 이것이 float 속성을 가졌다면, 해당 요소는 컨테이너의 외부로 넘칠 것이다. 이를 해결하기 위해서 clearfix 속성을 사용한다.

해당 컨테이닝 블록에다가 다음 속성을 설정한다.

1
2
3
4
5
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

clearfix

수직 가운데 정렬 - padding

padding을 상하로 주어서 수직 가운데 정렬을 해줄 수 있다.

1
2
3
4
.center {
  padding: 70px 0;
  border: 3px solid green;
}

이를 text-align:center; 와 같이 쓰면 수평 수직 가운데 정렬이 가능하다.

1
2
3
4
5
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

수직 가운데 정렬 - line-height

line-height 속성을 사용하여 수직 가운데 정렬을 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
.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;
}

수직 가운데 정렬 - position & transform

1
2
3
4
5
6
7
8
9
10
11
12
13
.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

수직 가운데 정렬 - flexbox

flexbox는 IE10나 이전버전에서는 지원되지 않는다.

1
2
3
4
5
6
7
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}