img css 가운데 정렬,table css 가운데 정렬,html div css 가운데 정렬,div css 가운데 정렬,css 이미지 세로 가운데 정렬,css 가운데 정렬 태그,css 가운데 정렬 margin,css 가운데 정렬 transform,css 가운데 정렬 가로,css 가운데 정렬 세로,
박스 내의 텍스트가 아닌 박스 자체를 ( ex) 팝업 ) 세로 중앙(가운데) 정렬시키는 방법.
position:absolute의 경우 부모가 position:relative를 가지고 있다는 전제하에 작성.
텍스트의 세로 중앙정렬은
따로 정리해놓았다.
https://blog.naver.com/kira4195/221182885666
1. position: absolute; 50%로 밀고 px로 당기기.
※ 가운데 정렬시키고 싶은 대상을 왼쪽, 위로부터 반(50%) 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법. 가장 통상적인(?) 방법.
- 장점 : 막힘없는 하위 버전 호환.
- 단점 : 대상의 width, height 값이 유동적이지 않다. (px로 고정 후 반 길이만큼 당겨주어야 하므로!!)
2. position: absolute; 50%로 밀고
translate으로 당기기.
※ 마찬가지로 반(50%) 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법.
- 장점 : width와 height가 고정되지 않아도 사용 가능하다.
- 단점 : transform의 크로스 브라우징이 안 좋다. prefix 필요. IE 8 이하는 적용되지 않는다.
-ms- 없이도 IE9 작동하던데 음... 여하튼 IE9까진 쓰려면 쓸 수는 있다!
3. position 모든 방향에서 당기는 방법.
※ div를 모든 방향에서 당긴 후( 이때 div는 전 화면에 꽉 차게 된다.) height 값을 주면 전체 부모의 가운데에 위치하게 됨.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
- 단점 : IE7 이하는 작동하지 않는다.
4. table-cell로 만들어 세로 중앙 정렬 시키기.
※ 전체 감싼 박스를 table로 만든 후 안의 박스를 table-cell로 만들어 그 안의 개체를 vertical-align:middle로 중앙 정렬 시키는 방법. 한 줄에 여러 요소를 넣어야 할 때는 display: table 대신 display: inline-table을 사용할 수도 있다.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
.wrapper의 공간이 없어도 내용이 잘리지 않는다.
- 단점 : IE7 이하는 작동하지 않는다. 약간 태그 단계가 깊어진다.
5. float 속성을 이용하는 방법.
※ floater라는 보이지 않는 div를 body의 50%의 높이를 갖게 한다. 그 바로 아래에 clear 속성을 넣은 box가 위에 floater밑으로 오게하면 자기 크기의 반만큼 중간에서 floater의 margin으로 당겨지게 된다.
* margin-top 이나 margin-left는 음수 값으로 당기면 스스로가 그 방향으로 당겨지지만, right나 bottom은 본인이 아닌 그 다음에 오는 요소가 당겨지게 한다.
- 장점 : 모든 브라우저에서 작동한다.
- 단점 : 공간이 좁을 땐 콘텐츠가 잘리고 스크롤바가 나타난다.
6. :before로 가상 콘텐츠를 넣어 중앙 정렬 시키기.
※ 100% 높이를 가진 부모의 앞에, 100% 높이를 가진 박스 하나를 놓는다. 그 박스에 vertical-align:middle을 줘서 그 안의 박스가 세로 가운데 정렬 되도록 하는 것.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
- 단점 : IE7 이하는 작동하지 않는다.
* 정리
- 박스를 정렬할 때 글자를 정렬할 때의 방법도 쓰므로, 사실 정확히 텍스트 정렬할 때와 박스 정렬할 때를 나눈다는 건 조금 무리였나도 싶다. :< 어쨌든 상황에 맞게 잘 찾아 쓰는데 도움이 되기를..!
Không có nhận xét nào:
Đăng nhận xét