문자를 정렬하는 속성에는 text-align, vertical-align 가 있습니다.

속 성 설 명
text-align 글자를 가로로 정렬
  • start: 현재 텍스트 줄의 시작 위치에 맞추어 정렬
  • end: 현재 텍스트 줄의 끝 위치에 맞추어 정렬
  • left
  • right
  • center
  • justify: 양쪽에 맞추어 문단을 정렬
  • match-parent: 부모 요소에 따라 문단을 정렬
vertical-align 글자를 세로로 정렬.
옆의 태그를 기준으로 세로로 정렬됨.
단, 옆에 태그가 없으면 정렬이 안됨.
  • baseline: 문자의 기준선에 맞추어 정렬.
  • top: 상단에 정렬
  • middle: 문자의 중앙을 기준선으로 해서 정렬.
  • bottom: 하단에 정렬
  • sub: 아래첨자
  • super: 윗첨자
  • text-top: 문자의 윗선을 기준선으로 해서 정렬.
  • text-bottom: 문자의 밑선을 기준선으로 해서 정렬.
  • 백분율: 백분율로 올리거나 내림.
      음수이면 내리고 양수이면 올림.
text-justify text-align 속성 값이 "justify" 라면 텍스트 양쪽 맞춤 방법을 지정
  • auto: 자동 맞춤
  • none: 정렬하지 않음
  • inter-word: 단어 사이의 공백을 조절
  • distribute: 글자 사이의 공백을 똑같이 맞추어 정렬
text-align-last 텍스트의 마지막 줄을 정렬.
  • start: 현재 텍스트 줄의 시작 위치에 맞추어 정렬
  • end: 현재 텍스트 줄의 끝 위치에 맞추어 정렬
  • left
  • right
  • center
  • justify: 양쪽에 맞추어 문단을 정렬
match-parent 부모 요소에 따라 문단을 정렬

<style>
span{
  vertical-align:100%;
}
</style>

보통 글자와 글자 <span>super</span> 지정

/* justify 예제 입니다. */
body {
  text-align: justify;
  text-justify: inter-word
}

text-align-last 예제 입니다.

<style>
p {
  text-align-last: right;
}
</style>

<p>The 2019 box office has finally received a jolt of energy with an impressive, $55.5 million debut for DreamWorks Animation's How to Train Your Dragon: The Hidden World. The performance led the weekend box office, closing out the final weekend within what has been a rough start to the first two months at the domestic box office this year. The weekend also saw MGM's expansion of Fighting with My Family, which debuted at the lower end of industry expectations, while Roadside's Run the Race found itself within the top ten from just 853 locations.</p>

결과 화면입니다.

The 2019 box office has finally received a jolt of energy with an impressive, $55.5 million debut for DreamWorks Animation's How to Train Your Dragon: The Hidden World. The performance led the weekend box office, closing out the final weekend within what has been a rough start to the first two months at the domestic box office this year. The weekend also saw MGM's expansion of Fighting with My Family, which debuted at the lower end of industry expectations, while Roadside's Run the Race found itself within the top ten from just 853 locations.

0 댓글