Ruby Coin

Rails 와 프론트 엔드 기술을 이용해 흥미 위주의 빠른 웹 개발 방법론

vertical-align

토픽 Ruby Coin > Development > Front-End > CSS 사전

Summary

인라인 엘리먼트나 테이블의 셀 안에서 수직정렬을 지정한다.

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <백분율> | <길이> | inherit
기본값 baseline
적용대상 인라인 블럭과 테이블의 셀 엘리먼트들
상속 상속안됨
퍼센테이지 line-height값을 참조
미디어 Visual

Value

  • baseline : 인라인 박스의 베이스라인을 부모박스의 베이스라인에 정렬한다.
  • sub : 인라인 박스의 베이스라인을 부모박스의 아래첨자 문자로 적당한 위치로 낮춘다. 글꼴 크기에는 영향을 주지 않는다.
  • super : 인라인 박스의 베이스라인을 부모박스의 윗첨자 문자로 적당한 위치로 올린다. 글꼴 크기에는 영향을 주지 않는다.
  • top : 인라인 박스의 맨위를 라인박스의 윗변에 정렬한다.
  • text-top : 인라인 박스의 맨위를 부모 엘리먼트 글꼴의 맨 위에 정렬한다.
  • middle : 인라인 박스의 수직 중간점을 부모박스의 베이스라인에 소문자 'x'높이의 반(1/2)을 올린다.
  • bottom : 인라인 박스의 아랫변을 라인 박스의 바닥에 정렬한다.
  • text-bottom : 인라인 박스의 맨아래를 부모 엘리먼트 글꼴의 맨 아래에 정렬한다.
  • 길이 : 해당길이 만큼 인라인 박스를 올린다. (음수일때는 내린다. ) '0'은 baseline을 의미한다.
  • 백분율 : 해당 백분율을 line-height속성 값의 백분율 길이 만큼 올리거나(양수) 내린다(음수).  '0'은 baseline을 의미한다.

Tip

  1. 다음과 같이 사용할 수 있다.
    span {
        vertical-align: top;
    }

Sample

 

댓글

댓글 본문
  1. 푸른하늘
    10일차 공부 감사합니다