폰트 크기 줄이고 세로 정렬 맞추기 - line-height 또는 inline-flex

혼자 문제해결한 과정 기록한 포스팅

현재 지식수준에서 찾은 해결방법을 기록합니다.

 

 

display

• inline 
  • 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지
  • width와 height 속성을 지정해도 무시된다
  • margin과 padding속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않음
  • span, a, video, audio 등
• block
  • block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지
  • width, height, margin, padding속성이 모두 반영됨
  • div, h1~h6, table, p, ul, li 등 
• inline-block
  • inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능
  • 내부적으로는 block 따르지만, 외부적으로는 inline 처럼보임
    (상하좌우 마진 가질수 있으면서, 컨텐츠의 크기만큼 차지)
  • img, input, button, FontAwesome
• inline-flex 
  • 내부적으로는 flex 따르지만, 외부적으로는 inline 처럼보임
    container안에서는 flexible한 아이템들을 갖지만, flex container는 inline 특성
    (flex는 flex container가 block요소처럼 작용, 
    inline-flex는 flex container가 inline요소처럼 작용)

 

 

inline-block 과 Inline-flex

• display:inline-block 예시

See the Pen inline-block by JEONG (@cona) on CodePen.

• 버튼 안의 초록 숫자가 폰트 싸이즈와 같은크기일 때 display : inline-block 을 넣어서 만들 수 있다.
• inline 아닌 inline-block 을 사용해야만 height , width 를 지정하여 볼 크기를 동글동글하게 만들수 있다 ,, (안그러면 눈깔세로로 그린것마냥 이상해짐)
• vertical-align : middle 적용해야만 각각의 span의 세로 정렬이 중앙에 맞춰짐 (적용하지 않으면 세로축 중심이 맞지않음)

vertical-align : middle 적용 x

vertical-align : middle 적용 o

 

이때 숫자 9의 폰트사이즈를 줄이면?

작아진 font때문에 숫자가 위로 올라간다.

 

- 이때 .habit-count 클래스에 line-height 속성을 주면 숫자 9를 세로중앙에 정렬할 수 있다.

 

 

- 또는 inline-flex를 사용하여   align-items : center; 속성을 주어서 세로정렬을 맞출수 있다.

 

• display:inline-flex 예시

See the Pen inline-flex by JEONG (@cona) on CodePen.

 

* line-height는 간편하고, inline-flex는 한번 적용시켜놓으면 폰트사이즈를 어떻게 바꿔도 중앙에 오니까 유용하다.

 

 

읽어보면 좋을 글

 

https://heropy.blog/2018/11/24/css-flexible-box/