프론트 초보 css 질문..

Question

.header__homelink { display: inline-block; width: 100px; padding: 0 24px; height: var(--height-toolbar); line-height: var(--height-toolbar);}.header__logo { height: 48px; vertical-align: middle; margin-bottom: 4px;}홈 링크를 헤더 가운대에 위치시키려고 이렇게 했는데요(a 요소의 부모요소가 header 태그입니다)궁금한게 두가지가 있습니다. .header_homelink 에 height만 있고 line-height가 없으면 .header_log에 vertical-align : middle을 지정해도 위아래로 가운대 정렬이 안되더라구요. 왜 a태그에 height와 line-height가 둘 다 지정되어있어야 a태그 안의 img 요소의 vertical-align이 먹는건가요? 한 요소에 height와 line-height가 같은값으로 지정되어있으면 그 요소의 내용이 위아래로 가운대 정렬이 된다고 알고있어서 처음에 .header_homelink에 위와 같이 height, line-height 동일값으로 지정해두기만 했는데 이미지가 수직 중앙 정렬이 안되더라구욧.. 이거는 텍스트만 적용되는 건가요?헤더에 로고 박는데 로고가 수직 중앙 정렬이 안되서 막 이렇게 저렇게 하다가 위 코드처럼 해서 되긴 했는데 정확히 왜 됐는지 정확한 원리는 아직 잘 모르겠네요 ㅜ 알려주실분..!

JengYoung · Answer

vertical-align이 line-height값을 참조하는 것으로 알고 있습니다. line-height는 다음과 같이 MDN에서 서술되어 있어요.sets the height of a line box.이는 line box의 높이를 설정해준다는 것이지, 내부에 있는 line box들의 위치를 결정지어주는 것은 아니겠죠?반면 image는 인라인 블록 내에 위치한 line box의 성격을 갖고 있죠!(이미지는 기본적으로 인라인 요소로 정의되기 때문) 이는 vertical-align의 대표적인 사용 예시로 MDN 문서에 기술되어 있네요 :)To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text.즉, line-height를 통한 정렬이 안되는 이유는 중첩된 line box 의 위치를 결정하는 속성이 아니기 때문이며, 이는 vertical-align을 통해 처리하는 것이 맞는 것으로 보입니다.

프론트 초보 css 질문..

1개의 답변

기술 목록