한 줄을 모두 차지하고 있는, block 요소를 가지고 있는 div 태그 가운데 정렬하기 1탄에 이어..다시 한 번 간략하게 정리!
1. margin : 0 auto;
div 가운데 정렬로 흔히 사용하는 margin: 0 auto 를 주고 싶다면, width와 height 값을 설정해야한다
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
한 블럭이 양옆으로 차지하고 있는 특성으로 위,아래는 영향을 받지 않아 0으로 값을 주고 양 옆을 균등하게 나누기 위해 auto를 사용한다. 하지만 이 경우는 width와 height 값이 있거나 또는 설정해야만 margin 값이 적용되는 것을 볼 수 있다
width값과 height값을 적용하지 않고, horizonal center만 적용하고 싶다면 text-align: center을 이용하면 된다.
.center {
text-align: center;
border: 3px solid green;
}
2. position
position 프로퍼티를 이용하여 가운데 정렬을 하고 싶다면, left와 margin-left값을 이용해야하는데, 이 경우에도 width의 값을 알아야한다
position : absolute 를 이용하면 margin 의 값은 모두 무시된, 새로운 개념으로 적용된다. 하지만 이 경우에도 수직적인 가운데 정렬시 left : 50% (body기준) 의 값을 준 다음, margin-left 에 width 값의 1/2만큼 negative 값을 주어 완전히 가운데 정렬하는 것처럼 보여야하는데, 이 때도 마찬가지로 width 값을 알아야한다. 수평적인 가운데 정렬도 마찬가지로, top을 이용해야하는데 margin-top 의 경우에도 height 값을 알아야 한다.
추후 디자이너가 수정을 요청하거나 크기를 조절해야할 경우 다시 일일이 작업해야하는 번거로움이 생긴다.
가운데 정렬이 아닌 좌/우측 정렬을 할 때도 position: absolute; 설정 후 right 또는 left 값을 0으로 설정해 정렬할 수 있다.
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
- absolute로 설정한 element는 정상 흐름에서 제거되어 다른 element와 겹칠 수 있다.
3. width와 height 값을 모른다면?
transform : translate(-50%,-50%)
여기서의 translate에 적용된 -50%의 퍼센테이지는, position: absolute;가 적용받는 부모인자의 퍼센테이지가 아닌 자기 자신에 대한 -50%이므로 width 값과 height 값을 몰라도 자동으로 가운데 정렬을 할 수 있다. 수직적으로만 가운데 정렬하고 싶다면, translate(-50%)로 작성하는 등 자유자재로 사용하면 된다!
또한, div 에 추후 내용이 추가되거나, 삭제되어도 자동으로 -50%만큼 이동이 되기 때문에 overflow 되는 경우나 배열이 틀어지는 경우를 방지할 수 있다
이런 페이지의 경우에도, Weegle이라는 이미지 하나를 소스로 가져왔는데, width 값과 height 값을 임의로 설정해서 margin : auto 값을 주어도 되지만, 다른 요소인 text box나 button의 경우에도 따로 설정해주는 번거로움을 피하기위해 transform : translate을 이용하여 레이아웃을 구성하였다.
