CSS 요소 수직정렬 (block, inline-block)

1. Inline / Inline-block 요소

보고 공부한 링크
vertical-align속성을 사용한다.

  • 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않음
  • table cell에 적용할 때는 내용에 영향.
  • 정렬하는 요소를 다른 인라인 요소에 상대적으로 정렬.
    • 그래서 같은 줄에서 인라인 요소 크기 따라 높낮이 달라질 수 있고,
    • 그 줄에 있는 line-height설정에 따라서도 달라질 수 있음.
  • 속성값
    • baseline: 기본값. 부모 요소의 기준선(글자에서 꼬리 뺀거)에 맞춤.
    • sub: 부모의 아래첨자 기준선에 맞춤.
    • super: 부모의 위첨자 기준선에 맞춤.
    • text-top: 요소의 맨 위를 부모 font의 맨 위에 맞춤.
    • text-bottom: 요소의 맨 아래를 부모 font의 맨 아래에 맞춤.
    • middle: 부모 요소 중앙에 위치
    • top: 요소 맨 위를 줄에서 가장 큰 요소의 맨 위에 맞춤.
    • bottom: 요소 맨 아래를 줄에서 가장 낮은 요소에 맞춤.
    • 값(px, cm): 0px는 베이스라인과 같음. 높아질수록 올라감.
    • 값(%): line-height의 백분율. 0%는 baseline.

이미지 수직 가운데 정렬

  1. 이미지를 담을 div만들어 div에 line-height속성 사용
  2. 이미지에 vertical-align:middle
  3. line-height는 이미지 height보다 높아야 함.
<div id="content"><img src="molamola.png"></div>
#content {
    line-height: 200px;
}
#img {
    vertical-align: middle;
}

한줄 텍스트 수직 가운데 정렬

  1. 텍스트 div만들어 div에 div랑 같은 크기의 line-height속성
  2. 필요하면 div에 height값도 적용.

Refer

vertical-align속성 자세히 알기
수직으로 가운데 정렬 5가지
Vertical align middle on an inline-block anchor tag

Published by

Yurim Jin

아름다운 웹과 디자인, 장고와 리액트, 그리고 음악과 맥주를 사랑하는 망고장스터

3 thoughts on “CSS 요소 수직정렬 (block, inline-block)”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s