가운데정렬의 난 case 1 - 이미지와 텍스트 수직정렬하기

문제점

 

 

왜 이따구인데.

 

저 weniv 로고이미지와 '로그인'텍스트를 수직정렬하고싶다. 제발.

 

HTML

<div class="login">
 <a href="#"><img src="weniv-logo.svg" alt="winiv-logo" />로그인</a>
</div>

CSS

 

.login a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

---

해결시도 1. .login에 flex속성으로 중앙정렬 시도

 

.login {
  display: flex;
  justify-content: center;
  align-items: center;
}

결과

먹긴 하나 안됨. 지멋대로 센터

 

 

---

해결시도 2. .login flex 다른속성으로 시도

.login {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

 

결과

div에게 부여된 height를 모두 사용할 수 있으니 가장 아래에 붙음. 최악

 

---

해결시도 3. img태그에 vertical-align: center와 middle 시도

 

결과

 

안 됌(사진없음)

 

---

해결시도 4. img태그에 vertical-align: end?!!!

 

.logo-img {
  vertical-align: bottom;
}

 

결과

로그인텍스트의 align이 로고에 맞춰 밑으로 맞춰지면서 정렬이 되었다!!!

이때까진 왜 이렇게 해야하는지 이해가 안되었으나.. 추가해결방법을 찾으며 이해가 되었다.

---

+추가해결방법 5. a태그에 display:flex를 주고 align-items: flex-end 주기

결과

.login a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
}

 

---

결론

 

핵심은 인라인태그들의 속성을 이해하고 상황에 맞는 align속성 설정이다.

vertical align속성이 왜 있냐? 를 이해해보면 쉬운데,

이는 글씨의 폰트마다 크기가 제각각이고, 또 영어에 y나 g와 같이 baseline을 넘어가는 선들이 있어 그 가상의 공간까지 너비로 잡아주기 때문이다.

 

애초의 상황을 inspector로 보면 알겠지만, '로그인'텍스트가 아래쪽 빈 공간이 잡히며 위로 떠있다.

이를 어찌됬든 수직정렬로 아래로 맞춰줘야 하는 작업이 필요했던 것. 

상황에 따라 다른 vertical-align속성을 부여해야 하는데, 무조건 구글에 검색으로 가장 많이 나오는 해결방법인 center나 middle, baseline를 썼으니 당연히 이 케이스에 맞지 않아 먹히지 않은 것이다.

 

아무튼 그래서 이 인라인tag들의 미세한 수직정렬을 위해서 있는게 vertical align이다. inline이나 lnline-block요소에만 먹힌다!

 

 

---

 

교훈: 구글 복붙도 좋지만 상황에 따라 다르게 적용하자.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

vertical-align - CSS: Cascading Style Sheets | MDN