1. 개발자를 위한 웹 기술
  2. CSS
  3. CSS 참고서
  4. Properties
  5. text-align

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

text-align

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

* Some parts of this feature may have varying levels of support.

CSS text-align 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 vertical-align과 동일하나 세로가 아닌 가로 방향으로 동작합니다.

시도해 보기

text-align: start;

text-align: end;

text-align: center;

text-align: justify;

<section id="default-example">
  <div id="example-element">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </div>
</section>

section {
  font-size: 1.5em;
}

#default-example > div {
  width: 250px;
}

구문

css
/* 키워드 값 */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* 표 열의 문자 기반 정렬 */
text-align: ".";
text-align: "." center;

/* 블록 정렬 값 (비표준 구문) */
text-align: -moz-center;
text-align: -webkit-center;

/* 전역 값 */
text-align: inherit;
text-align: initial;
text-align: unset;

text-align 속성은 다음 방법 중 하나를 사용해 지정합니다.

값

start

쓰기 방식이 좌횡서면 left와 같고, 우횡서면 right과 같습니다.

end

쓰기 방식이 좌횡서면 right과 같고, 우횡서면 left와 같습니다.

left

인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.

인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.

center

인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.

justify

인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.

justify-all

justify와 같지만 마지막 줄에도 적용합니다.

match-parent

inherit과 비슷하지만, start와 end 값을 부모의 direction에 맞춰 적절한 left와 right 값으로 치환합니다.

<string>

표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.

접근성 고려사항

양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.

형식 정의

초기값start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.
적용대상block containers
상속yes
계산 값as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right
Animation typediscrete

형식 구문

text-align = 
  start         |
  end           |
  left          |
  right         |
  center        |
  <string>      |
  justify       |
  match-parent  |
  justify-all
이 구문은 CSS Text Module Level 4에 따른 최신 표준을 반영합니다. 모든 브라우저가 모든 부분을 구현한 것은 아닙니다. 지원 정보는 브라우저 호환성을 참조하세요.

예제

왼쪽 정렬

HTML

html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css
.example {
  text-align: left;
  border: solid;
}

ê²°ê³¼

가운데 정렬

HTML

html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css
.example {
  text-align: center;
  border: solid;
}

ê²°ê³¼

양쪽 정렬

HTML

html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css
.example {
  text-align: justify;
  border: solid;
}

ê²°ê³¼

참고

인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 margin을 auto로 설정하는 것입니다.

css
.something {
  margin: auto;
}
css
.something {
  margin: 0 auto;
}
css
.something {
  margin-left: auto;
  margin-right: auto;
}

명세

Specification
CSS Logical Properties and Values Module Level 1
# text-align
CSS Text Module Level 3
# text-align-property

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content