반응형
See the Pen CSS - Position bottom center by zinee (@zineeworld) on CodePen.
한글로 적으니까 진짜 이상한데... 상황을 설명하자면,
1. position: abolute로 특정 위치가 정해진 상태
2. 워딩에 따라 width는 유동적
3. 항상 중앙에 위치
보통 저런 경우에는 display: inline-block; width: auto; 해놓고 부모 요소에 text-align: center; 를 많이 하지만, position: absolute 상태여서 적용할 수 없었다. 다국어 지원을 하게 되면서 dynamic width로 인한 이슈가 늘 있다. 잠깐 헤맸지만 금방 해결책을 찾았다! transform: translate(-50%); !!
반응형
'개발일지 > 2016' 카테고리의 다른 글
[CSS Drawing] 13. Judy (Dingo Friends) (0) | 2016.11.28 |
---|---|
[CSS Drawing] 12. Con (Kakao Friends) (0) | 2016.11.25 |
[CSS Drawing] 11. Jay-g (Kakao Friends) (0) | 2016.11.24 |
[CSS Drawing] 10. Apeach (Kakao Friends) (0) | 2016.11.23 |
[CSS] Country dropdown with flag (0) | 2016.11.23 |