Centering in CSS
CSS로 아주 심플한 이력서를 하나 만드는데도 걸림돌이 아주 많았다. 하나가 꼬이기 시작하면 나머지도 꼬여버리고, 될 줄 알았던 property가 먹히지 않고..그 중 하나의 이유는 elements들을 centering 하는 방법이 제각기 다르고 또 너무 많은 방법이 있기 때문이었다.
일단 내가 뭘 모르는지 알았다는거에 감사하면서, element마다 어떻게 centering을 해야 할 지 정리해보려 한다.
Horizontally
1. inline or inline-elements일 때 (ex: text, links, span, a, button, img...)
이하와 같은 방식으로 centering을 해줄 수 있다.
.center {
text-align: center;
}
inline, inline-block, inline-table, inline-flex에 등등에 적용가능하다
2. block level element일 때 (ex: p, div, article, aside, header, footer, li, main, nav)
margin-left와 margin-right을 auto로 설정하면 된다.(width가 이미 적용되어있다는 가정하에)
.center-me {
margin: 0 auto;
}
왜 중앙정렬을 이렇게 하는지는 역사와 전통이 너무 꼬였기 때문에 설명이 어려움. 그냥 외우자
Author And Source
이 문제에 관하여(Centering in CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@koreanhamster/Centering-in-CSS-Why-does-it-have-to-be-so-hard저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)