CSS : mastering centering

출처

• https://medium.com/@liangxianyi2011_28511/mastering-css-centering-your-guide-to-every-technique-a10cde7c37e0
• https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

---

왜 궁금했을까

코드잇 과제 를 진행하던 중에 중앙 정렬이 잘 안되어 진땀을 뺐다.

위의 <a> 태그를 중앙 정렬하고 싶어, 여러 방법을 시도했으나 잘 안 되었다.

1. 처음 시도한 방식은 <a> 태그에 text-align: center 속성값을 주는 것이었다.

.chainit-section a, .chainify-section a, .chainit-nano-section a{
  display: inline-block;
  text-align: center;
}

하지만, 여전히 a 태그의 위치에는 미동도 없었다. a 태그의 display 값을 인라인으로 바꾸어도 중앙정렬은 되지 않았다.

2. 두번째로는, a 태그에 margin: 0 auto 속성 값을 줘봤다.

.chainit-section a, .chainify-section a, .chainit-nano-section a{
 display: inline-block;
 margin: 0 auto;
}

아무런 변화가 없다. 심지어 가로에 준 auto 는 반영이 안 된 것인지, 해당 요소의 마진 값이 없는 것으로 나온다.

그런데, 또 margin : 0 300px 처럼 임의의 값을 주면, 해당 마진은 또 적용이 되어 요소가 이동을 한다. auto 라는 값의 사용법이 잘못된 것일까?

3. 오리무중에 빠지어, 마지막으로는 정공법이 아닌 속임수를 써서 문제를 해결했다. 바로 a 의 부모 요소에 text-align : center 값을 주고, a 의 형제에게는 text-align : left 값을 주어, a 요소만 중앙 정렬 시키는 것이다.

.chainit-section, .chainify-section, .chainit-nano-section {
  text-align : center;
}

.chainit-section h2, .chainify-section h2, .chainit-nano-section h2,
.chainit-section p, .chainify-section p, .chainit-nano-section p,
.chainit-section img, .chainify-section img, .chainit-nano-section img{
  text-align: left;
}

직관적인 코드는 아니지만, 어쨌든 작동은 했다...!

그런데, 실험 중에 작성한 a 태그의 text-align : right 을 실수로 지우지 않고 남긴 것이다.

아직 남아 있는 <text-align : right>... 그럼에도 불구하고 중앙 정렬은 잘 되어 있다...

그렇다면, a 태그가 가진 text-align : right 은 아무래도 a 태그의 중앙 정렬과는 상관이 없는 것 같다...

과제의 정답은 제출했지만, 의문만 더 많이 생겼다.

• 왜 margin : auto 가 적용이 안된걸까
• text-align 이 작동하는 범위는 뭘까, 어떤 경우에 이 속성을 사용하는게 바람직할까
• 사람들이 자주 쓰는, 좀 더 정석적인 방법의 중앙 정렬 방법에는 뭐가 있을까

margin: auto

https://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto 나와 비슷한 사람이 질문한 내용이 있다. 이 사람이 말하길, margin: auto가 작동하기 위해서는 두 가지 조건이 있다고 한다.

• 첫 번째로, 가운데 정렬하고자 하는 요소가 width를 가지고 있을 때에만 동작한다. 그렇지 않으면 요소의 width가 자동으로 부여되기 때문에 가운데 정렬이 되지 않는다고 한다.
• 두 번째로, margin: 0 auto는 block 요소에만 적용되며, inline 요소에는 적용되지 않는다. 따라서, 요소가 가로 중앙에 정렬되기 위해서는 먼저 inline 요소를 블록 요소로 바꾸거나, inline 요소를 포함하는 부모 요소를 블록 요소로 설정해야 한다.

됐다...! 감격의 순간이다.

해당 답변대로 기본적으로 인라인 요소인 a 태그를 블록 요소로 바꾸어 주었고, 너비에 임의의 값을 줬다. 실험 결과, inline-block는 margin: auto 가 적용되지 않았고, 오직 블록 요소에만 적용되는 것을 확인했다.

다만, 내가 원하는 스타일링과 다른 점이 있다.

• 첫째로는, a 태그에 임의의 너비를 줘야 한다는 점이다. 내가 스타일링하고자 하는 버튼은 "거래소 둘러보기" 버튼 뿐만이 아니다. 적정한 너비를 일일이 계산하는 것도 큰 수고인데다, 코드의 유지보수 측면에도 단점이 있다고 생각한다.
• 둘째로는, 낡은 방식의 코딩이다. MDN 문서를 열어보니 최신 방법은 flex 를 통한 중앙 정렬이지, margin: auto 는 오래된 브라우저를 위한 방식이라 기술하고 있다.

  However, in older browsers like IE8-9 that do not support Flexible Box Layout, these are not available. In order to center an element inside its parent, use margin: 0 auto;.

text-align

text-align CSS 속성은 블록 요소나 테이블 셀 상자 내부의 인라인 수준 콘텐츠의 수평 정렬을 설정한다고 한다. 이는 MDN의 text-align 문서의 첫 문장이다.

<a href="#">거래소 둘러보기</a>

.chainit-section a, .chainify-section a, .chainit-nano-section a{
  display: inline-block;
  text-align: center;
}

이 문장 하나로, 왜 위의 코드가 원하는 대로 작동하지 않는지 알 수 있게 되었다.

text-align은 block 내부의 inline 콘텐츠의 정렬을 결정한다. 따라서, a 태그에, text-align 속성값을 주어도, 이는 a 태그 내부의 "거래소 둘러보기" 라는 문자열의 정렬에만 해당하는 것이지, a 태그 자체의 부모에 대한 중앙정렬을 결정하는 것이 아니다...!

a 태그의 형제인 h2 태그와 p 태그에서 잘만 작동한 이유는, 이 둘이 block 요소이고, 자동으로 width=100% 을 가지기 때문..!

결국, text-align 의 역할은 계란 안의 노른자를 계란 정중앙에 위치시키는 것이지, 계란 판 안의 계란을 정렬시키는 것이 아니라는 것이다....!!!

내가 text-align 의 용도를 모르고 완전히 오용했다는 것을 깨달았다. 그럼에도 불구하고 이 속성을 이용하여 원하는 중앙정렬을 하려면 어떻게 해야할까?

      <div class="wrapper">
        <a href="#">거래소 둘러보기</a>
      </div>

.wrapper{
  text-align: center;
}

작동했다..!

바로, a 태그를 block 요소로 감싼 뒤, 블록 요소에 text-align:center 를 주는 것이다.

이 방법도 성공적일 수는 있지만, 더 나은 중앙정렬 방법은 없을까?
오직 스타일링을 위해, wrapper 요소를 남용하는 것은, 다른 개발자들이 보기에 가독성이 떨어져 보일 수 있을 것 같다. 좀 더 직관적인 방법을 찾아보자.

MDN: center an element

공식문서 MDN의 권장 방법은 바로 flex와 grid를 이용하는 것이다..!

center an element using flexbox

다른 상자 내에서 상자를 가운데로 정렬하려면, 먼저 포함 상자의 display 속성을 flex로 설정하여 플렉스 컨테이너로 만든다. 그런 다음 align-items: center로 설정하여 수직 가운데 정렬하고, justify-content: center로 설정하여 수평 가운데 정렬할 수 있다.

위의 내용을 이용하여, 내 코드에 적용해보겠다.

.chainit-section, .chainify-section, .chainit-nano-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chainit-section a, .chainify-section a, .chainit-nano-section a {
  align-self: center;
}

이렇게, 중앙정렬하고 싶은 a 태그에게만 align-self: center을 줌으로써, 원하는 스타일이 가능해졌다!

center an element using grid

다른 상자 내에서 상자를 가운데로 정렬하는 또 다른 방법은 먼저 포함 상자를 그리드 컨테이너로 만든 다음 place-items 속성을 center로 설정하여 블록 및 인라인 축에서 항목을 중앙 정렬하는 것이다.

위의 내용을 이용하여, 내 코드에 적용해보겠다.

.chainit-section, .chainify-section, .chainit-nano-section {
  display: grid;
}

.chainit-section a, .chainify-section a, .chainit-nano-section a {
  place-self: center;
}

정말 간단하게, 두 줄의 코드만으로 원하는 중앙정렬을 이루어 냈다...!

---

소감

정말 기초적인 실수로 시작된 블로깅인데, 참 많은 것을 배웠다.
큰 시간 쏟았지만, 성장을 위한 성장통이라고 생각한다.
앞으로 중앙정렬로 헤멜 일은 없을거라 다짐해보겠다..!
(헤메더라도 이 글을 다시 찾아 읽으면 정답을 구할 수 있을 것이다..!)

대견하다 나 자신, 화이팅!